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От издательства 


Все иллюстрации со значком можно посмотреть 
в цветном варианте по ссылке һр: //вроо.в1/јјІҮт2. 





В память о моей маме и лучшем друге 
Марии Веру (1952-2013), 
слишком рано покинувшей этот мир. 


Предисловие 


О, старые добрые времена! В прошлом столетии у нас было всегда два браузера 
с поддержкой С55, и поддерживали они весьма ограниченное подмножество 
функций из весьма ограниченной спецификации, поэтому полную карту того, 
что работало, а что нет, можно было с легкостью держать в голове. Эта карта 
также включала проблемы каждой реализации, поскольку ошибок и оплошно- 
стей — порой нелепых до комичности — хватало с лихвой. Да что там говорить, 
некоторые ошибки были настолько фундаментальными, что делали способы 
обработки макета в разных браузерах совершенно несовместимыми, заставляя 
нас придумывать целые арсеналы трюков, использующих дыры в синтаксиче- 
ском анализаторе, только для того, чтобы обходить эти различия! 


Погодите-ка. Старые добрые времена были просто ужасными. Как хорошо, что 
они остались в прошлом! 


За последние несколько лет дела в сфере С55 значительно улучшились. Бра- 
узеры теперь по большей части совместимы друг с другом, а если и возникает 
несовместимость, то практически всегда по той причине, что один браузер не 
поддерживает возможность, которая уже есть в другом, а не как раньше — когда 
оба пытались поддерживать одну и ту же вещь, но по-разному, и чаще всего оди- 
наково плохо. Спецификации значительно расширились и усовершенствовались 
и, среди прочего, включают возможности, воссоздающие хитроумные трюки из 
прошлого, но значительно более простыми и компактными способами. С5$ пред- 
лагает гораздо больше возможностей и гораздо больше мощи, чем когда-либо 
до этого, — но, как все мы знаем, с большим могуществом приходят большие 
сложности. И дело даже не втом, что сложность повышается намеренно: когда вы 
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объединяете достаточно большое число работающих частей, неважно, насколько 
проста каждая из них, — их сочетание может породить весьма интересные вещи 
(эта тема хорошо раскрыта в фильме «Лего»). 


Но именно эта непреднамеренная сложность дарует С$5 способность удив- 
лять нас новыми, внезапно появляющимися возможностями, которых мы не 
то что не ожидали, но даже не планировали. Скрещивая различные свойства 
и неожиданным образом используя значения, мы откроем еще множество 
секретов. Вы можете вырезать фигурные углы с помощью градиентов, аними- 
ровать элементы, увеличивать области, реагирующие на щелчки мыши, даже 
создавать секторные диаграммы... и это далеко не полный список. С$$ пред- 
лагает возможности, о которых во времена, когда я был еще юным пареньком, 
мы могли только мечтать, возможности за пределами нашего воображения. 
Мы получили функциональность, которая, как мне казалось, в принципе не 
может быть выражена в компактной, удобной для человеческого восприятия 
манере — например, анимацию. С55 превратилась в настолько продвинутую 
технологию, что, я уверен, нас ждет еще масса удивительных открытий! Воз- 
можно, какие-то секреты удастся разоблачить именно вам. 


Но пока этот день не наступил, у вас есть возможность пользоваться множеством 
интереснейших техник, которые уже были обнаружены и описаны, — и мало 
кто для этого сделал больше, чем Леа Веру. Публикации в ее блоге, ее вклад 
в разработку продуктов с открытым кодом, ее динамичные интерактивные 
выступления по всему миру — все это позволило Леа накопить огромный 
объем знаний о С$5. Эта книга — великолепная выжимка из ее необъятного 
опыта. В своих руках вы сейчас держите ключ к одним из самых интересных, 
удивительных и полезных техник, наработанных специалистами С$5 вплоть 
до сегодняшнего дня, руководство, составленное ярчайшими профессионалами 
своего дела. То, что Леа приготовила для вас на этих страницах, обогатит вас, 
доставит вам наслаждение и — да — даже поразит вас! 


Идите, учитесь и срывайте покровы тайны с этих открытий. 


Эрик А. Мейер 


Введение 


За последние несколько лет язык С$$ претерпел огромные преобразования, 
схожие с революцией ЈауаЅсгірё в 2004 году. Из простейшего языка стилиза- 
ции с ограниченными возможностями он превратился в сложную технологию, 
определяемую более чем 80 спецификациями \/ЗС (включая черновики) с соб- 
ственной экосистемой разработки, собственными конференциями, собственной 
инфраструктурой и инструментарием. Технология С55 выросла до такого 
размера, что одному человеку практически невозможно целиком удержать ее 
в своей голове. Даже в рабочей группе С$$ МЗС, которая создает определение 
языка, никто не может назвать себя экспертом по всем возможным аспектам 
С$8, и лишь немногие подбираются к этому званию. Большинство членов 
рабочей группы фокусируются на определенных спецификациях С5$ и могут 
практически ничего не знать об остальных. 


Примерно до 2009 года квалификация специалиста по С55 определялась не 
его знанием языка. Это считалось данностью для любого серьезного проекта, 
включающего С5$. Вместо этого мерилом мастерства было количество ошибок 
и обходных путей, которые человек держал в памяти. Перенесемся в 2015 год: 
сегодня браузеры разрабатываются с учетом стандартов, и корявые трюки, за- 
вязанные на особенности конкретных браузеров, порицаются общественностью. 
Разумеется, периодически еще встречаются ситуации, в которых несовмести- 
мостей не избежать, но — особенно с учетом того, что большинство браузеров 
теперь обновляются автоматически, — темп перемен настолько высок, что по- 
пытка задокументировать их в книге была бы пустой тратой времени и места 
на страницах. 


Трудности современного С$5$ не связаны с поиском обходных путей вокруг 
трудноуловимых ошибок в браузерах. Сложность в том, чтобы творчески при- 
менять доступные нам возможности С$5$, создавая гибкие, легкие решения, 
удобные в сопровождении и соответствующие принципам ОКУ и, насколько 
возможно, совместимые с существующими стандартами. Именно об этом 
я рассказываю в книге. 


Множество книг, доступных на сегодняшнем рынке, документируют определен- 
ные возможности С55 от А до Я. Хорошо это или плохо, но «Секреты С55» — не 
одна из них. Ее назначение — заполнить пробелы в знаниях, оставшиеся после 


того, как вы уже ознакомились со справочными 
материалами, открыть ваш разум новым способам 
применения функциональности, с которой вы уже 
знакомы, а также познакомить вас с полезными 
возможностями С55, которые не так модны и по- 
пулярны, но заслуживают не меньшей любви. Одна- 
ко прежде всего главная задача этой книги — научить 
вас решать проблемы с помощью С$$. 


Также «Секреты С55» не относится к классу сбор- 
ников советов. Ни один из содержащихся здесь 
«секретов» не является завершенным рецептом, 
требующим строгого следования каждому шагу, 
для того чтобы достичь определенного эффекта. 
Я постаралась детально описать процесс мышления, 
лежащий в основе реализации каждой техники, так 
как я верю, что понимание процесса поиска реше- 
ния намного ценнее, чем само решение. Даже если 
вы не думаете, что та или иная техника пригодится 
вам в вашей конкретной работе, понимание пути, по 
которому мы пришли к решению, может оказаться 
полезным при попытке справиться даже с совер- 
шенно непохожими проблемами. Короче говоря, 
из этой книги вы вытащите немало пресловутых 
рыбок, и все же моя основная цель здесь — дать 
вам в руки удочку, научив, как их ловить. 
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Аббревиатура ОВУ расшиф- 
ровывается как Ооп Ререаї 
Уоигзе! — «не повторяй- 
тесь». Это популярная в про- 
граммистском сообществе 
мантра, продвигающая один 
из аспектов удобного в сопро- 
вождении кода: возможность 
менять значения параметров 
с помощью как можно мень- 
шего числа правок, в идеаль- 
ном случае ограничиваясь 
одной. Акцент на соответ- 
ствии С55-кода принципам 
ОКУ — повторяющаяся тема 
этой книги. Противополож- 
ность ОКУ — принцип МЕТ, 
что означает Ие Епјоу Туртд 
(«нам нравится печатать») 
или Ите Еуегуттд Тиисе 
(«пишите все дважды»). 


Благодарности 


Эта книга никогда бы не была написана, если бы не помощь и поддержка 
множества потрясающих людей, которым я бесконечно благодарна. Огромное 
сердечное спасибо: 


О всем, кто на протяжении многих лет поддерживал меня в работе, иначе 
я в принципе никогда не смогла бы написать книгу. Читателям моего блога 
(ћр://Іеа.уегои.те), ленты в Тег (НЕр://Лмиегсот/еауегои) и публикаций 
в любых других источниках и особенно — тебе, дорогой читатель моей пер- 
вой книги! Всем, кто использует мои разработки с открытым кодом (Пр:// 
аКПиБ.сот/еауегоц), и еще больше тем, кто внес свой вклад в их создание; 


О всем организаторам конференций, которые приглашали меня для проведе- 
ния лекций и семинаров, особенно Дамиану Вилгосику (Оатіап \\Ме|505) 
и Павлу Черски (Ра\уе! СлегѕКкі), первыми поверившим в меня и пригласив- 
шим на инаугурационную конференцию Егот(-Тгеп4$ в 2010 году. А также 
Василису Вассалосу (\Уа$Ш$ \Уа5а10$), который в 2010 году доверил мне 
подготовку курса по веб-разработке для Афинского университета экономики 
и бизнеса. Этот опыт оказался для меня бесценным уроком преподавания 
(а техническая книга — это, по сути, преподавание); 


О всем членам рабочей группы С$$, проголосовавшим за приглашение меня 
в качестве внешнего эксперта, — это событие полностью изменило мои 
взгляды на веб-технологии в целом и С$$ в частности; 


О моим редакторам, Мэри Треселер (Магу Тгезеег) и Мэг Фолей (Мес Ео[еу), 
передавшим контроль над всем процессом в мои руки и проявлявшим неве- 
роятное терпение, когда я пропускала установленные сроки (что случалось 
куда чаще, чем мне хотелось бы признавать); 


О моему редактору по производству Каре Ибрагим (Кага Ергаһіт), которая по- 
тратила огромное количество времени, исправляя ошибки макета и вручную 
убирая проблемы визуализации С5$, компенсируя ограничения программы 
рендеринга РЮЕ которая использовалась для этой книги; 


О моим научным редакторам: Элике Этемад (ЕПКа Есетаа), Табу Аткинсу 
(ТаБ Аскірѕ), Райану Седдону (Вуап Зе44оп), Элизабет Робсон (ЕЙзаБе 
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ВоБзоп), Бену Хенрику (Веп Непіск), Робину Никсону (Кођіп №хоп) 
и Хьюго Жираделю (Ниво Слгаи4е!). Они не только помогли мне испра- 
вить фактические ошибки, но и предоставили бесценную обратную связь 
касательно понятности моей писанины; 


Эрику Мейеру (Егіс Меуег) — я до сих пор не могу поверить, что он согла- 
сился написать предисловие к моей книге; 


моему научному руководителю Дэвиду Кергеру (Рахій Кагеег), проявивше- 
му бесконечное понимание, когда я прибыла в МІТ, не закончив эту книгу, 
что должно было быть сделано давным-давно. Если бы не его бескрайнее 
терпение, судьба этой книги могла бы быть весьма печальной; 


моему отцу Милтиадесу Комвутису (МПНа4ез Котуоиїіѕ), с ранних лет 
знакомившему меня с искусством и эстетикой. Если бы не он, я вряд ли бы 
заинтересовалась дизайном и С$5$, и эта книга была бы посвящена чему- 
нибудь совершенно другому, например С++ или программированию ядра; 


моему дяде и второму отцу Стратису Веросу (Ѕїгаїіѕ Уегоз) и его чудесной 
жене Марии Брере (Мапа Втеге), терпевшим мои капризы и невыносимое 
поведение во время работы над этой книгой. А также их дочерям, Леони 
(Теопіе) и Фиби (Рһоеђе), — самым милым девочкам в мире, без которых 
я закончила бы эту книгу на месяц раньше; 


моей невероятной маме Марии Веру (Мана Уегои), к сожалению, уже по- 
чившей. Все 27 лет, в течение которых мы были в этом мире вместе, она 
оставалась моим лучшим другом и самой большой поддержкой. Ее жизнен- 
ная история не может не вдохновлять: она переехала на другой конец света, 
для того чтобы в 1970-е — во времена, когда большинство женщин в Греции 
с трудом дотягивали до университета, — стать аспирантом в МІТ, и получила 
степень с отличием. Она привила мне честолюбие, доброту, целостность, не- 
зависимость и широту взглядов. Но важнее всего то, что она научила меня 
не относиться к жизни слишком серьезно. Я невероятно скучаю по ней. 


Авторство фотографий 


Огромная благодарность людям, публикующим свои фотоработы со свободными 
лицензиями Стеамуе Соттоп$; в противном случае во всех примерах в этой 
книге фигурировали бы фотографии моего кота (на самом деле очень часто так 
и есть). Вот список фотографий с лицензированием СС, которые я использовала, 
а также адреса веб-сайтов, где вы их можете найти: 


Ноиѕе Маае Ѕаиѕаде тот Ргате Сгаѕѕ Саїе, Мойибгоок, 
Кигтап Соттипісайопѕ, Іпс 


Һр://Яіск.сот/кигтапрһоїо5/7847424816 


Саїѕ {паЁ И/ерсһіск 15 Негаіпо, Ка\ееп Миадһ 


Һір://#іскг.сот/сеагаасһћ/4549876293 


Ѕіопе Ап, Јоѕеѓ виегег 


Һр://Яіскг.соту/јоѕеЁиеѓег/5982121 


А Ее! оѓ Тийрз, Вотап Воей 


Һір://#іскг.сот/готапБоеа/867231576 





Кеѕііпд т {пе Ѕипѕһіпе, Ѕёеме \Ивоп 


Һір://#іскг.сот/рокегргіє/10780890983 


№ хоз ІѕІапа, Сгеесе, Сһгіѕ Ниёсһіѕоп 


ћір://Яіскг.сот/етріоућеѕкіппубоу/3904743709 
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Для кого эта книга 


Главная целевая аудитория этой книги — разработчики С$$ среднего и про- 
двинутого уровня. Избавившись от информации начального уровня, мы можем 
посвятить больше времени изучению сложных сценариев использования со- 
временных возможностей С$$ и их разнообразных комбинаций. Это, однако, 
означает, что я сделала несколько предположений относительно вашего уровня 
подготовки, мой дорогой читатель: 


о 





я предполагаю, что С$$ 2.1 вы знаете назубок и у вас за плечами несколько 
лет разработки. Вы не мучаетесь вопросом, как же работает позициониро- 
вание. Вы используете генерируемое содержимое для украшения дизайна, 
не прибегая к помощи лишней разметки или изображений. И вы не раз- 
вешиваете ! іпрог+апё по всему коду, так как действительно понимаете 
специфичности, наследование и каскадирование. Вы знаете составные ча- 
сти блочной модели и вас не способно расстроить схлопывание полей. Вам 
знакомы разные единицы изменения длины, и вы знаете, в какой ситуации 
какую из них лучше применить; 


вы достаточно хорошо знакомы с наиболее популярными возможностями 
С$$3 — либо из статей, опубликованных в Сети, либо из книг — и пробовали 
применять их, пусть даже ограничиваясь своими личными проектами. Даже 
если вы не исследовали их детально, вы знаете, как создать скругленные 
углы, добавить тень Бох- ѕһааом или определить линейный градиент. Вы уже 
поиграли с базовыми двумерными трансформациями и немало времени по- 
святили изучению базовых переходов и анимации; 


у вас есть представление о формате ЗУС, и вы знаете, для чего он исполь- 
зуется, даже если файлы в этом формате вы самостоятельно не создаете; 


вы можете читать и понимать простейший код Јауа$сгірі, такой, например, 
какой требуется для создания элементов, манипулирования их атрибутами 
и добавления их в документ; 


вы слышали о препроцессорах С$$ и знаете, на что они способны, даже 
если решили в своей работе их не использовать; 
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О вы не плаваете в математике уровня средней школы: квадратные корни, 
теорема Пифагора, синусы, косинусы и логарифмы. 


Однако для того чтобы читатели, не удовлетворяющие вышеперечисленным 
требованиям, также могли наслаждаться книгой, в начале некоторых секре- 
тов я добавила врезку «Предварительные требования», в которой вкратце 
перечисляю аспекты С$8 или предыдущие секреты, с которыми необходимо 
ознакомиться, чтобы понять и научиться применять текущий секрет. (Сюда, 
разумеется, не входят возможности С55 2.1, потому что в этом случае врезка 
стала бы очень длинной.) Она выглядит так: 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Знание свойства Бох - ѕһайом, базовое знание градиентов С55, секрет «Гиб- 
кие эллипсы» 


Таким образом, даже если какие-то вещи вам неизвестны, вы можете почитать 
о них, а затем снова вернуться к секрету. При условии, что предварительные 
требования соблюдены, секреты можно читать в любом порядке, хотя име- 
ет смысл все же придерживаться того порядка, в котором они представлены 
в книге, так как он не случаен и я посвятила достаточно времени обдумыванию 
последовательности. 


Обратите внимание, что я упомянула о «разработчиках С$5» и что «навыки 
дизайна» среди представленных выше предположений не числятся. Важно 
помнить, что это не книга о дизайне. Хотя она неизбежно затрагивает опреде- 
ленные принципы дизайна и описывает некоторые улучшения взаимодействия 
с пользователем, «Секреты С55» — это в первую очередь книга о решении 
проблем с кодом. С$5-код порождает некий визуальный результат, но это все 
еще код, точно такой же, как код ЗУС, \Ме СТ./ОрепСТ, или ЈауаЅсгірё Сапуаѕ 
АРІ, а не дизайн. Для написания хорошего гибкого С$5$ требуется такое же 
аналитическое мышление, что и для программирования. Сегодня, когда боль- 
шинство людей используют для своего С58-кода препроцессоры со всеми их 
переменными, математикой, условными выражениями и циклами, написание 
кода С$5 уже практически неотличимо от программирования! 


Это не означает, что я не приглашаю дизайнеров прочитать эту книгу. Каж- 
дый, кто обладает достаточным опытом программирования на С$5, может 
почерпнуть из нее что-нибудь полезное, и многие талантливые дизайнеры 
также способны писать превосходный С$$-код. Однако необходимо отме- 
тить, что я не ставила себе целью в этой книге учить вас совершенствованию 
визуального дизайна или удобства использования веб-сайта, даже если это 
и произошло по факту. 
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Форматирование и условные 


обозначения 


Эта книга состоит из 47 «секретов», тематически 
сгруппированных в семь глав. Все эти секреты более- 
менее независимы и — при условии, что все предвари- 
тельные требования выполняются, — с ними можно 
знакомиться в любом порядке. Демонстрационные 
примеры в каждом из секретов — это не готовые 
веб-сайты и даже не их части. Я намеренно делала их 
как можно меньше и проще, для того чтобы их было 
удобнее изучать. Я исхожу из предположения, что вы 
уже имеете представление о том, что намереваетесь 
реализовать. Цель этой книги — предоставлять не 
дизайнерские идеи, а решения по их реализации. 


Каждый секрет разбит на два или более раздела. 
Первый раздел, озаглавленный «Проблема», содер- 
жит описание распространенной проблемы, которую 
мы будем решать с помощью С$$. Иногда в таком 
введении я также описываю популярные, но недо- 
статочно хорошие решения данной проблемы (на- 
пример, решения, требующие объемной разметки, 
жестко закодированных значений и т. п.) и чаще всего 
завершаю его одной из вариаций вопроса: существует 
ли лучший способ реализовать то же самое? 


За описанием проблемы следует одно или несколько 
решений. Вдохновением для этой книги послужили 
семинары по С55, которые я проводила на различ- 
ных конференциях, поэтому я постаралась сохранить 
формат интерактивной презентации, насколько это 
возможно в книге. Каждому решению сопутствуют 
несколько иллюстраций, демонстрирующих визу- 
альный результат каждого шага решения в случае, 
если он приводит к каким-то видимым изменениям. 
Поскольку иллюстрации не всегда находятся рядом 
с текстом, описывающим происходящее на них, все 
иллюстрации пронумерованы и я ссылаюсь на них 
по номерам. Пример иллюстрации вы можете видеть 
на рис. П.1, аэто предложение — пример упоминания 
иллюстрации. 





Рис. П.1. Это пример 
иллюстрации во врезке, 
главный герой которой — мой 
котенок сэр Адам Кэтлейс 


Примечания, подобные этому, 
содержат дополнительную 
информацию или объяснение 
термина, встретившегося 

в тексте. 


Это предупреждение. 

Его назначение — 

предупредить вас 
(удивительное совпадение, не 
так ли?) о возможных оши- 
бочных предположениях и ва- 
риантах, как что-то может 
пойти не так. 


18 Об этой книге 


Строковый код выделяется моноширинным шрифтом, а названия и коды цветов 
часто дополняются небольшой цветовой меткой (например, #+06). Блочные 
фрагменты кода выглядят так: 


раскегоипа: иг1("адатса*1асе. р"); 


или так: 


НТМЕ 


<Ғіриге» 
<іте 5гс="адатса*1асе. ре" /> 
<Ғівсарііоп>ѕіг Адат Са+1асе</Ғірсарііоп»> 
</Ғівиге» 


Как вы заметили, в случае, когда язык во фрагменте кода отличается от С55, 
он указан в заголовке листинга. Помимо этого, если в примере задействован 
только один элемент, без каких-либо псевдоклассов или псевдоэлементов, то 
обычно для краткости я опускаю в коде селекторы и фигурные скобки ({}). 


Все примеры на ]ауа ст! ре в этой книге относятся к простейшему уровню и не 
требуют никакой инфраструктуры или библиотек. Используется только одна 
вспомогательная функция, $$(), необходимая для того, чтобы было проще про- 
ходить по множеству элементов, соответствующих определенному селектору 
С55. Вот определение этой функции: 


35 

Ғипсііоп $$(зе1есфог, соптехі) { 
сопехі = сопїехї || аоситепё; 
уаг е1етепёѕ = сопфех*.диегу$е1ес*огА11 (ѕе1есіог); 
гефигп Аггау.ргоёоёуре.51ісе.са11(е1етепёѕ); 

} 


ЗАНИМАТЕЛЬНАЯ СТРАНИЧКА. 
ВРЕЗКА С ИНТЕРЕСНОЙ ИНФОРМАЦИЕЙ 


Врезки, озаглавленные «Занимательная страничка», — это интересные 
заметки, связанные с обсуждаемой темой, например, историческая или тех- 
ническая справка о рассматриваемой возможности С55. Их не обязательно 
читать, для того чтобы понять или начать использовать основной материал, 
и все же они могут оказаться полезными любознательному читателю. 
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К каждому секрету прилагается один или несколько интерактивных примеров, 
для доступа к которым используются короткие и легкие в запоминании ОКІ- 
адреса на сайте ћр://ріау.сѕѕѕесгеіѕ.іо. Ссылки на них выглядят так: 


ПОПРОБУЙТЕ САМИ! 
Һр://ріау.сѕѕѕесгеѕ.іо/ 


Я настоятельно рекомендую вам внимательно изучать примеры из врезок «По- 
пробуйте сами!», особенно если вы запутались в описании техники или зашли 
в тупик в попытке воспроизвести пример самостоятельно. 


Надлежащая благодарность: если описанная техника впервые была 
задокументирована другим участником сообщества, я обязательно 

упоминаю об этом во врезках «Благодарности», подобных этой, ука- 

зывая также ШОВІ-адрес источника. Мы все знаем, что необходимость = 4 
искать раздел «Список литературы» в конце книги ужасно затрудняет Благодарности 
чтение, поэтому я ссылаюсь на источники прямо в контексте. 


БУДУЩЕЕ. 
БУДУЩИЕ РЕШЕНИЯ 


Врезки «Будущее» содержат описание техник, для которых уже подго- 
товлены черновые спецификации, но которые на момент написания этой 
книги еще не реализованы. Читателю следует всегда проверять, поддер- 
живаются ли эти техники, так как вполне возможна ситуация, что они были 
реализованы уже после публикации книги. В случаях, когда возможность 
настолько малоизвестна, что упоминания о ней может не быть даже на веб- 
сайтах поддержки браузеров, эта врезка включает ссылку на тест, который 


читатель может загрузить, перейдя по короткому, легко запоминающемуся 
ОВІ-адресу, такому, как показан ниже в примере «Протестируйте!». Оформ- 
ление таких тестов обычно включает оттенки зеленого, когда возможность 
поддерживается, и оттенки красного в противном случае. Точные инструкции 
приведены в коде в форме комментариев. 


ПРОТЕСТИРУЙТЕ! 


ћёр://рІау.сѕѕѕесгеёѕ.іо/&еѕё-сопіс-дгайіепі 
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В конце почти всех секретов вы найдете список связанных спецификаций, 
который выглядит так: 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 

С55 Васкодгоипаѕ & Вогаегѕ: ПЕр://м3.ога/ТВ/с$5-Баскдгоипа$ 
ЅеІесіогѕ: Һір://%3.ого/ТВ/ѕеіесіогѕ 

ЅсаіаЫе Месіог Сгарһісѕ: ИЕр://м/3.ога/ТВ/5\МС 


Сюда входят ссылки на все спецификации, возможности из которых были 
упомянуты в секрете. Однако так же как и врезка «Предварительные требо- 
вания», врезка «Связанные спецификации» не включает функциональность 
С$$ 2.1 (Һір://3.0г9/78/С5521), иначе одни и те же возможности пришлось бы 
перечислять после каждого секрета. Это означает, что те несколько секретов, 
в которых мы обсуждаем только возможности из С5$ 2.1, не дополняются 
врезкой «Связанные спецификации». 


Поддержка браузерами и резервные решения 


Вероятно, самая необычная особенность этой книги — полное 
отсутствие таблиц совместимости с браузерами. Это осознан- 
ное решение, так как с учетом сегодняшних релизных циклов 
браузеров подобная информация неизбежно устаревает еще до 
Ограниченная ТОГО, как книга успевает попасть на полки магазинов. Я считаю, 

поддержка что неточная информация о поддержке браузерами вводит 
разработчика в заблуждение, что еще хуже, чем отсутствие 
такой информации. 





Однако большинство представленных здесь секретов либо вполне прилично 
поддерживаются браузерами, либо для них существуют хорошие резервные 
решения. Если поддержка браузерами определенной техники находится на 
слишком низком уровне, вы увидите предупреждающий значок «Ограниченная 
поддержка» рядом с заголовком соответствующего решения, как здесь, рядом 
с этим абзацем. Этого должно быть достаточно, для того чтобы вы поняли: не 
стоит использовать данное решение, не проверив уровень поддержки браузе- 
рами, а также не позаботившись о качественных резервных решениях. 


В Сети вы найдете множество превосходных веб-сайтов, предлагающих самую 
свежую информацию о поддержке браузерами. Вот несколько из них: 


Форматирование и условные обозначения 21 


О Сап ПО$е...? (Һр://сапіиѕе.сот) 
о УеБР1аЧогт.огя 
О Мо2Ша Оеуеюорег МебхогК (НИр://Чемеюрегто?Иа.огд) 





О статья в №іКірейіа Сотрагіѕоп о} Гауоиѓ Епріпеѕ (Сазсайтр 5 рее) 
(Һр://еп.уікіреаїіа.ога/мікі/Сотрагіѕоп_оѓ Іауоиё_епоіпеѕ_ (Саѕсааіпо_Ѕїуіе_ Ѕһееѓѕ)) 


Иногда вы будете обнаруживать, что определенная возможность поддержи- 
вается, но ее реализация в разных браузерах немного отличается. Например, 
она может требовать браузерного префикса или ее синтаксис может быть 
несколько иным. В примерах в этой книге я использую только синтаксис без 
префиксов, как он определяется в стандартах. Однако практически в любой 
ситуации вы можете одновременно использовать разные варианты синтаксиса, 
и тогда нужный будет выбираться автоматически в соответствии с правилами 
каскадирования. По этой причине стандартную версию всегда следует указы- 
вать последней. Например, для получения вертикального линейного градиента 
от цвета уе11ом до гей в книге я всегда буду использовать только стандартную 
версию: 


Баскёгоипа: 11пеаг-вгад1еп{(904её, уе11ом, геа); 


Однако если вы хотите обеспечить поддержку очень старых браузеров, воз- 
можно, в итоге ваш код будет выглядеть примерно так: 


Баскргоипа: -то2-1іпеаг-ргадіепі (94её, уе11ом, геа); 
Баскёгоипа: -о-1іпеаг-вгадіеп+ (дев, уе11ом, геа); 
Баскёгоипа: -мебкі+-1іпеаг-вгадіеп+(даев, уе11ом, геа); 
раскегоипӣа: 1Ііпеаг-егадіепі(9@дер, уе11ом, геа); 


Поскольку ландшафт этих различий настолько же Подробнее о браузерных пре- 
нестабилен, как и поддержка браузерами, я ожидаю, Фиксах, почему они существу- 
что в вашей работе проверка таких вещей будет 7 и как абстрагироваться от 
них в вашем коде, вы можете 

одним из этапов обязательного исследования перед 

Е ., С55 прочитать в разделе «Песнь 
применением той или иной возможности И сраувеенаи 
этому не обсуждаю их в решениях, представленных префиксов». 


в данной книге. 


Аналогично, хорошей практикой считается обеспечение резервных решений, 
для того чтобы ваши веб-сайты не ломались в старых браузерах, пусть даже 
ценой более простецкого внешнего вида. Когда обходные решения очевидны, 
я не заостряю на них внимание, так как предполагаю, что вы знакомы с принци- 
пами каскадирования. Например, при определении градиента, скажем, такого, 
как показанный выше, вы могли бы добавить в самом начале сплошной цвет. 
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При выборе такого цвета рекомендуется останавливаться на среднем из двух 
цветов градиента (в данном случае гб (255, 128, 0)): 


Баскёгоипа: герб (255, 128, 0); 

раскегоипа: -то2-1іпеаг-ргааіепі (ӨдӢев, уе11ом, геа); 
Баскргоипа: -о-1іпеаг-вгадіеп+ (дев, уе11ом, геа); 
Баскёгоипа: -мебкі-1іпеаг-вгадіеп+ (даев, уе11ом, геа); 
Баскргоипа: 11пеаг-вгад1еп{ (904её, уе11ом, геа); 


Однако иногда каскадирование не позволяет обеспечить надежное резервное 
решение. Тогда в качестве последнего средства можно прибегнуть к помощи 
инструментов, подобных Мо4егияг (ћёр://тоаегтігг.сот), которые добавляют 
классы вроде ёехіѕһайом или по-+ехїѕһайом к корневому элементу (<п&т1>), 
чтобы вы могли с помощью них обращаться к элементам только в том случае, 
когда нужные возможности действительно поддерживаются (или не под- 
держиваются), например: 


ћ1 { со1ог: вгау; } 


.ехіѕһайом һ1 { 
со1ог: ігапѕрагеп+; 
Техі-ѕһайом: 9 0 „Зет вгау; 


Если возможность, для которой вы пытаетесь создать резервное решение, доста- 
точно новая, то можно использовать правило @ѕиррог+ѕ, «родное» для Мо4егтияг. 
Например, предыдущий фрагмент кода превратится в такой: 


№1 { со1ог: вгау; } 


@ѕиррогіѕ (+ех*-$Вадом: Ө Ө „Зет ргау) { 
һ1 { 
со1ог: Егапзрагеп*; 
Техі-ѕһайом: 0 0 „Зет ргау; 


Однако к использованию @ѕиррог+ѕ следует подходить с большой осторож- 
ностью. Применив его здесь, мы ограничили описываемый эффект не просто 
браузерами, поддерживающими тени для текста, но и браузерами, поддержи- 
вающими дополнительно правило @ѕиррог+ѕ, а это куда более ограниченное 
множество. 


И наконец, всегда есть вариант добавить несколько строк кода ]ауаЗсг! ре ручной 
работы, который будет определять, поддерживается ли возможность, и добав- 
лять классы в корневой элемент так же, как это делает Мойегпіхг. Основной 
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способ, как проверить, поддерживается ли свойство, — посмотреть, существует 
ли он, воспользовавшись объектом е1етеп* . ѕ&у1е любого элемента: 


3$ 
уаг гоо = аоситеп* . іоситепЕЕ1етепЕ; // <ҺЕт1> 


1+ ('{ехЕбПадом' іп гоо*.$%уУ1е) { 
гооЁ.с1а551 151 .ааа( ' ёехіѕһааом'); 


} 

е15е { 
гооЁ.с1а551 151 .ааа( ' по-ёехёѕһайом'); 

} 


Если нам нужно проверить несколько свойств, предыдущую проверку легко 
превратить в функцию: 


35 


Ғипсёіоп фез{Ргорег%у(ргорегфу) { 
уаг гооф = аоситеп* .доситеп{Е1етеп*; 


1+ (ргорег+у іп гооф.$%у1е) { 
ГОО*.с1а$$5Ё15%. айа(ргорег+у. ёоіомегСаѕе()); 
геигп гие; 


} 


гоо. с1а55115+.ааа('по-' + ргорег+у.ёогомегСаѕе()); 
гефигп Ға1ѕе; 


} 


Для того чтобы протестировать значение, нужно присвоить его свойству 
и проверить, сохранит ли его браузер. Поскольку здесь мы модифицируем 
стили, а не просто проверяем их существование, в тесте разумно использовать 
элемент-заглушку: 


35 
уаг аитту = доситеп+. сгеафеЕ1етепт{ ('р'); 
аитту . ѕ+у1е.баскегоипаїтаре = '114пеаг-вгад1еп* (геа, ап) '; 


1+ (аитту. ѕ+у1е.браскегоипаїтаре) { 
гоо. с1а55115+.ааа( '1іпеагргадіепёѕ'); 
І 
е15е { 
гоо. с1а55115+.ааа( ' по-1іпеагегааіепёѕ'); 


} 
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Это также легко преобразуется в функцию: 


35 


Ғипсііоп еѕ+\а1ие(іа, уа1ие, ргорегфу) { 
уаг аитту = Ӣоситеп+ . сгеаёеЕ1етепё('р'); 
атту. ѕ&у1е[ргорег+у] = уа1ие; 


1+ (аитту.ѕ+у1е[ргорег+у]) { 
гоо. с1а551151.ааа(іа); 
геигп гие; 


} 


гооЁ.с1а551151.ааа('по-' + іа); 
гефигп Ға15ѕе; 


Тестирование селекторов и @ги1ез немного сложнее, но выполняется по тому 
же принципу: когда дело доходит до С5$5, браузеры отбрасывают все, что они не 
понимают, так что для проверки того, была ли возможность распознана, можно 
динамично применить ее и посмотреть, сохранил ли ее браузер. Необходимо 
всегда помнить, однако, что даже если браузер в состоянии разобрать синтаксис 
возможности С55, это не гарантирует, что таковая возможность реализована 
правильно и что она вообще реализована в принципе. 


Введение 1 


Веб-стандарты: свои или чужие? 


Процесс подготовки стандартов 


Вопреки распространенному мнению, \УЗС (Могіа 
У 4е \еЬ Сопѕогііит, Консорциум Всемирной 
паутины) не «делает» стандарты. На самом деле 
он играет роль форума, помогая заинтересованным 
сторонам собираться в так называемые рабочие 
группы МЗС (МЗС Могкіпе Стоирѕ) и проводить 
необходимую подготовительную работу. Разумеется, 
сам МЗС также не остается простым наблюдателем: 
Рис. 1.1. «Стандарты — он устанавливает основные правила и контролирует 
как сосиски: лучше процесс. Тем не менее фактическим написанием 
не видеть, как они делаются» спецификаций занимаются (в основном) другие 


(анонимный участник рабочей люди, а не сотрудники М’ЗС. 
группы МЗС) 





Спецификации С55, в частности, пишутся членами 

рабочей группы по каскадным таблицам стилей 
С55 — С$5 Могкіпе Стоир, которую для краткости часто называют просто 
рабочей группой С$$, или С$$ ҰС. На момент написания этой главы рабочая 
группа С$5 состоит из 98 участников, в том числе: 


О 86 сотрудников компаний-участниц МЗС (88%); 


О 7 приглашенных экспертов, включая вашу покорную слугу (7%); 





О 5 штатных сотрудников МЗС (5%). 


Как вы могли заметить, большинство членов рабочей группы (88%) — сотруд- 
ники компаний-участнии МЗС. Это организации, такие как производители 
браузеров, владельцы популярных веб-сайтов, исследовательские институты, 
общетехнологические компании и т. д., лично заинтересованные в процвета- 
нии веб-стандартов. Их ежегодные членские взносы обеспечивают большую 
часть финансирования МЗС, что позволяет Консорциуму распространять свои 
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спецификации бесплатно и открыто, в отличие от 
других органов по стандартизации, которым при- 
ходится взимать за них плату. 


Приглашенные эксперты — это веб-разработчики, 
которых попросили принять участие в процессе 
подготовки стандартов. Они основательно под- 
кованы с технической стороны вопроса, проде- 
монстрировали свою приверженность сообществу 
и на протяжении длительного времени оказывают 
помощь его членам. Рис. 1.2. Состав С55 МС: 

Ш компании-участницы 

приглашенные эксперты 

Ш штатные сотрудники МЗС 





И наконец, штатные сотрудники МЗС — это люди, 
фактически работающие в Консорциуме, которые 
содействуют обмену информацией между рабочей 
группой и МЗС. 


Среди веб-разработчиков широко бытует ошибочное представление о том, что 
М/ЗС спускает сверху некие стандарты, к которым бедным браузерам приходится 
подстраиваться, нравится им это или нет. Однако сильнее заблуждаться попро- 
сту невозможно: что касается стандартов, мнение производителей браузеров 
имеет куда больший вес, чем пожелания \\ЗС, и это убедительно доказывают 
цифры, приведенные ниже. 


Также в противоположность распространенному мнению стандарты создаются 
не в вакууме, не за закрытыми дверьми. Рабочая группа С$5 считает обеспе- 
чение прозрачности одной из важнейших своих задач; все ее коммуникации 
полностью открыты для публики, и каждый свободен высказывать свое мнение 
и участвовать в обсуждениях: 


О большая часть дискуссий ведется в рамках списка рассылки уүү-ѕ(уЇе 
(Рр://11 5.3 .ого/Агсһімеѕ/РиЫііс/ммм-ѕіуІе). Архивы обсуждений группы обще- 
доступны, и она открыта для каждого желающего присоединиться; 


О каждую неделю проводится телефонная конференция продолжительностью 
один час. К участию в ней допускаются только члены рабочей группы, однако 
протокол конференции в режиме реального времени публикуется на канале 
#с55 на ВС-сервере МЗС (Һр://ігс.м3.0го/). По завершении конференции 
протокол приводится в порядок и через несколько дней публикуется в списке 
рассылки; 


О также проводится ежеквартальное «живое» собрание, протокол которого 
ведется и публикуется таким же образом, как для телефонных конференций. 
Эти собрания открыты для наблюдения (аудита), однако для того, чтобы 
присутствовать на них, требуется запросить специальное разрешение у пред- 
седателей рабочей группы. 
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Хотели бы узнать больше? 
Элика Этемад (ЕЙКа Еќетаа), 
также известная как Ёапёаѕаі, 
написала серию порази- 
тельных статей о деятель- 
ности рабочей группы С$$ 
(ћір://ғапёаѕаі.іпкеаЫаае.пеё/ 
ууебіІо9/2011/іпѕіае-сѕѕүд). 
Горячо рекомендуется к про- 
чтению. 





Рис. 1.3. Частенько говорят, 
что председательствовать 

в рабочей группе МЗС — это 
то же самое, что пасти котов 


Все это составляет часть рабочего процесса МЗС 
и связано с принятием решений. Однако люди, не- 
сущие реальную ответственность за то, чтобы обле- 
кать данные решения в письменную форму (то есть 
за фактическую разработку спецификаций), — это 
редакторы спецификаций (Ѕрес ЕЧКог). Редактора- 
ми спецификаций могут быть штатные сотрудники 
М/ЗС, разработчики браузеров, заинтересованные 
приглашенные эксперты или сотрудники компа- 
ний-участниц, для которых это основная работа 
на полную ставку — компании платят им для того, 
чтобы совершенствовать и продвигать стандарты 
для всеобщего блага. 


Каждая спецификация проходит несколько этапов 
на своем пути от зарождения до окончательной 
зрелости. 


1. Редакторский черновик (Ейіќог'ѕ Огаё, ЕЮ): на 
первой стадии разработки спецификация может 
быть простым наброском идей редактора. К этой 
стадии не предъявляются никакие требования, 
и нет никаких гарантий, что данная версия будет 
утверждена рабочей группой. Тем не менее любая 
ревизия обязательно проходит эту стадию: все из- 
менения сначала вносятся в форме редакторского 
черновика и только после этого публикуются. 


2. Первый публичный рабочий черновик (Еїгѕі 
Ра с №огКкіпе Ога, ЕРҰР): первая опубли- 
кованная версия спецификации, которую рабочая 
группа считает готовой для представления ауди- 
тории с целью сбора отзывов и общественного 
мнения. 


3. Рабочий черновик (ЖогКкіпе Югаѓє, ҰР): за 
первым рабочим черновиком следует еще мно- 
жество. Каждый содержит очередные улучшения, 
основанные на отзывах рабочей группы и широ- 
кого сообщества. Зачастую первые реализации 
начинают создаваться именно на этой стадии, 
хотя нет ничего необычного также и в появлении 
экспериментальных реализаций на более ранних 
этапах подготовки спецификаций. 
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4. Рекомендованный кандидат (Сапіійаќе Кесоттепдайоп, СК): данная 
версия считается относительно стабильной. Это означает, что пришло вре- 
мя для реализаций и тестирования. Спецификация не может перейти на 
следующую стадию без подготовки полного набора тестов и создания как 
минимум двух независимых реализаций. 


5. Предложенная рекомендация (Ргоро5е4 Весоттепдайоп, РК): по- 
следний шанс для компаний-участниц МЗС выразить свое несогласие 
со спецификацией. Такое случается редко, поэтому чаще всего переход 
каждой РК-спецификации на следующий, финальный этап — всего лишь 
вопрос времени. 


6. Рекомендация (Кесоттепдайоп, КЕС): финальная стадия подготовки 
спецификации МЗС. 


Один или два члена рабочей группы также исполняют роль председателей. 
Председатели несут ответственность за организацию собраний, координи- 
рование звонков, контроль над хронометражем и, в целом, за общее управ- 
ление всем процессом. Выполнение обязанностей председателя отнимает 
огромное количество сил и времени, и зачастую эту деятельность сравнивают 
с пастьбой котов. Разумеется, каждый, кто знаком с процессом подготовки 
стандартов, знает, что это сравнение весьма сомнительно, — ведь пасти котов 
куда проще. 


С553, С554 и прочие мифические чудовища 


Спецификация С$$ 1 была очень короткой и относительно простой. Ее опубли- 
ковали в 1996 году Хокон Виум Ли и Берт Бос. Она была так компактна, что 
ее целиком сверстали на одной НТМТ-странице, а для печати спецификации 
требовалось около 68 листов бумаги формата А4. 


Опубликованная в 1998 году спецификация С$$ 2 была более строго опреде- 
ленной и влиятельной, и в ее подготовке принимали участие еще два редактора 
спецификаций: Крис Лилли и Иан Джейкобс. На данном этапе размер спе- 
цификации достиг 480 (!) печатных страниц, и она была уже слишком велика, 
для того чтобы человек мог полностью уместить ее в памяти. 


После С$5 второго уровня рабочая группа С$$ пришла к осознанию, что язык 
становится слишком велик для одной спецификации. И дело не только в том, 
что документ стал чрезмерно громоздким для чтения и редактирования, — еди- 
ная спецификация задерживала развитие С55. Вспомните, что для достижения 
спецификацией финального этапа каждая содержащаяся в ней возможность 
должна получить по меньшей мере две независимые реализации и обязана 
быть подвергнута тщательнейшему тестированию. Это уже становилось 
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непрактичным и нецелесообразным. Таким образом, было принято решение, 
что для того, чтобы продолжать двигаться вперед, общую спецификацию С$$ 
нужно разбить на множество отдельных спецификаций (модулей), каждый 
с собственным версионированием. Модули, расширяющие возможности, кото- 
рые уже присутствовали в С55 2.1, переводились на уровень З. Примеры таких 
модулей приведены далее: 


($5 Ѕупѓах (НЕр://\м3.ога/ТВ/сз5-зупках-3) 

С$$ Саѕсайіпе апа шрегкапсе (П&р://м3.ога/ТВ/с$$-сазсаае-3) 
($$ СоІог (НИр://З.ога/ТВ/с$$3-соог) 

Зеесбог$ (НЕр://мЗ.ога/ТВ/зе!еског) 

С$$ Васкогоипдѕ & Вог4ег$ (Һр: //\3.ого/ТВ/с553-раскогоипа) 
С$$ Уаше$ апа Опи$ (НЕр://\м3З.огд/ТВ/с$-маиез-3)) 

С95 Техё (ННр://м3.ога/ТВ/с$ехЕЗ) 

($$ Техё Оесогайоп (Һр://%3.огд/ТВ/сѕ-ехі-десог-3) 

С95 Еопё$ (Һр://3.огд/ТА/сѕ53-Ғопіѕ) 

С$$ Ваѕіс Оѕег Іпѓегѓасе (Һір://3.ого/ТВ/сѕ3-0і) 





ооооорооооро 


Однако модули, посредством которых вводились совершенно новые концепции, 
начинали свою историю с уровня 1. Вот несколько примеров: 


($$ Тгапѕѓогтѕ (Һр://3.огд/ТВ/сѕѕ-гапѕҒогтѕ-1) 
Сотроѕібіпе апа В!епашя (Һір://м3.ого/ТВ/сотроѕііпо-1) 
ЕЩег ЕЁесёѕ (Һр://З.ого/ТА/бег-еесіѕ-1) 

С$$ МазКше (Һр: //3.ого/ТВ/сѕѕ-таѕКіпд-1) 

С85 НехШе Вох Гауоиѓ (ПЕр://м3.ога/ТВ/с$$-Нехбох-1) 
С$$ Спа ГауоиЕ (Һір://3.ого/ТВ/сѕѕ-9гі-1) 





оооооодо 


Несмотря на популярность модного термина «С$53», конкретной специфи- 
кации, определяющей нечто подобное, в действительности не существует — 
в отличие, например, от спецификации для С$5 2.1 и ее предшественников. 
Употребляя это слово, чаще всего авторы имеют в виду некий произвольный 
набор спецификаций уровня З плюс несколько спецификаций первого уровня. 
Несмотря на то что разработчиками достигнута определенная степень консенсу- 
са относительно того, какие спецификации входят в «С553», с годами, с учетом 
разной скорости проработки и развития разных модулей С$$, будет становиться 
все сложнее использовать такие обозначения, как С$53, С$54 ит. д., не вводя 
читателей в заблуждение. 
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Песнь льда, пламени и браузерных префиксов 


Разработка стандартов всегда по своей природе парадоксальна: группы по 
подготовке стандартов нуждаются в информации от разработчиков, для того 
чтобы создавать спецификации, регулирующие реальные потребности разра- 
ботчиков. Но разработчики, в целом, не слишком заинтересованы в том, чтобы 
тестировать вещи, которые они не могут применять в своей работе. Когда экс- 
периментальные технологии начинают широко использоваться в производ- 
стве, у рабочей группы не остается иного выхода, кроме как придерживаться 
ранней, экспериментальной версии технологии, так как ее изменение способно 
поломать уже существующие веб-сайты. Очевидно, это полностью сводит на 
нет преимущества, которые способно принести тестирование ранних версий 
стандартов реальными разработчиками. 


За прошедшие годы было предложено множество вариантов выхода из этой 
непростой ситуации, но все они далеки от идеала. Повсеместно презираемые 
браузерные префиксы — один из них. Идея заключалась в том, что для каждого 
браузера могут быть реализованы экспериментальные (или даже патентованные) 
возможности, к названиям которых необходимо добавлять специальный префикс. 
Наиболее распространенные префиксы — это -по2- для Еігеѓох, -тѕ- для [Е, -о- 
для Орега и -меркі+- для Ѕаѓагі и Сһготе. Разработчикам предлагалось свободно 
экспериментировать с этими специальными возможностями и делиться своими 
впечатлениями с рабочей группой. Рабочая группа, в свою очередь, должна была 
учитывать обратную связь от разработчиков при подготовке спецификаций, по- 
степенно доводя соответствующую функциональность до совершенства. Так как 
у финальной, стандартизированной версии должно было быть другое название 
(без префикса), ее добавление не должно было порождать коллизии в продуктах, 
использующих уже существующие, обремененные префиксом эквиваленты. 


Звучит отлично, не так ли? Но, как вы уже, вероятно, знаете, реальность оказа- 
лась совершенно непохожей на то, что планировалось воплотить. Когда разра- 
ботчики осознали, что эти экспериментальные зависимые от браузера свойства 
позволяют с легкостью создавать эффекты, реализация которых ранее требовала 
огромных усилий и запутанных обходных путей, они принялись использовать 
их где только можно. Свойства с браузерными префиксами быстро преврати- 
лись в модную тенденцию в мире С$5$. Выпускались учебники, публиковались 
ответы на сайте ЗбаскОуегЙо\,, и скоро практически каждый уважающий себя 
С$5-разработчик обвешивал ими свои сайты с ног до головы. 


В конце концов разработчики осознали, что если использовать только суще- 
ствующие браузерные префиксы, то к уже имеющемуся коду необходимо воз- 
вращаться и добавлять новые объявления каждый раз, когда в новом браузере 
появляется поддержка их любимой классной возможности С$5. Не говоря уж 
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о том, что все префиксы, необходимые для той или иной возможности, вообще 
довольно сложно держать в памяти. Решение? Конечно же, всегда использовать 
все возможные браузерные префиксы, в конце заодно добавляя версию без пре- 
фикса, для того чтобы гарантировать правильную обработку кода в будущем. 
В результате код стал выглядеть примерно так: 


-то2-Богаег-гаа1и$: 10рх; 
-т$ -Богаег-гаа1и$: 10рх; 


-0- 


Богдег-гаӣіиѕ: 10рх; 


-меркі+ -богӣег-гааіиѕ: 10рх; 
Богдег-гааіиѕ: 10рх; 


Среди этих объявлений два избыточны: -тѕ-Богаег-гайіиѕ и -о-Богаег-гадіиѕ 
никогда ни в каком браузере не существовали, так как в ТЕ и Орега с самого 
начала было реализовано свойство богаег- гааїиѕ безо всякого префикса. 


Очевидно, что повторять каждое объявление до пяти раз невероятно утоми- 
тельно, а результирующий код не приспособлен для нормальной поддержки. 
Появление инструментов, которые автоматизировали бы это, было исключи- 
тельно вопросом времени: 


о 


на таких веб-сайтах, как С$$3, РІеаѕе! (һір://сѕѕ3ріеаѕе.сот) и рІеееаѕе (Һір:// 
рІеееаѕе.іо/рІаудгоџпа.ћт!), вы можете вставить С$$-код без префиксов и по- 
лучить обратно С$$ со всеми необходимыми префиксами. Подобные при- 
ложения стали одними из первых реализаций автоматического добавления 
браузерных префиксов, но быстро растеряли свою популярность, так как 
по сравнению с другими решениями довольно неудобны в использовании; 


Аиборгейхег (Һр://діїһиб.сот/аі/аиќоргейхег) использует базу данных из Сап 
І Оѕе... (ПЕр://сатизе.сот) для определения, какие префиксы необходимо 
добавить к коду без браузерных префиксов, и компилирует его локально, 
как препроцессор; 


моя собственная утилита -ргейх-#гее (Һіёр://1еауегои.оіһиб.іо/ргейхігее) вы- 
полняет тестирование возможностей в браузере, определяя, какие префиксы 
требуются. Ее преимущество в том, что она крайне редко требует обновления, 
так как получает всю необходимую информацию, включая список свойств, 
из окружения браузера; 


такие препроцессоры, как Е (НИр://е5$с$$.огд) и Заз$ (Һр://ѕаѕѕ-Іапд.сот), 
не предлагают стандартной функциональности добавления префиксов, но 
многие разработчики создают собственные подборки для возможностей, 
с которыми они чаще всего используют браузерные префиксы, и в обращении 
можно найти несколько подобных библиотек. 


Поскольку разработчики использовали версии без префиксов в качестве гаран- 
тии работоспособности своего кода в будущем, изменять их стало невозможно. 
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По сути, мы зашли в тупик с полусырыми ранними спецификациями, допускаю- 
щими лишь незначительные изменения. Совсем скоро все пришли к осознанию, 
что браузерные префиксы были эпическим провалом. 


Сегодня браузерные префиксы применяются для новых экспериментальных 
реализаций очень редко. Вместо этого экспериментальные возможности включа- 
ются с помощью конфигурационных флагов, что предотвращает использование 
их разработчиками в производственном окружении, — ведь вы не можете за- 
ставлять пользователей менять локальные настройки для того, чтобы веб-сайт 
на их машинах отображался правильно. Разумеется, следствием этого стало то, 
что теперь гораздо меньше разработчиков тестируют экспериментальные воз- 
можности, но мы все же получаем достаточно обратной связи — и, возможно, 
более высококачественной обратной связи, — не испытывая при этом слож- 
ностей, порождаемых браузерными префиксами. Однако пройдет еще немало 
времени, прежде чем мы полностью избавимся от неприятных последствий 
существования браузерных префиксов. 


Советы по написанию С55-кода 


Минимизируйте дублирование кода 


Соответствие кода принципу ОКУ и обеспечение удобства в сопровождении — 
одна из самых больших сложностей в разработке программного обеспечения, 
и это также применимо к С55. На практике одна из главных составляющих 
сопровождаемости кода — это минимизация объема редактирования, необхо- 
димого для внесения изменений. Например, если для того, чтобы увеличить 
кнопку, вам нужно сделать 10 исправлений во множестве различных правил, 
велик шанс, что несколько вы все же пропустите, особенно если изначально 
этот код написан не вами. И даже если исправления очевидны или вы в итоге 
находите все места, требующие правки, все равно это означает потерю времени, 
которое можно было бы использовать с большим толком. 


Но речь не только о будущих исправлениях. Гибкий С$$ означает, что вы пи- 
шете С58-код один раз, а затем с легкостью создаете различные его варианты, 
исправляя лишь небольшой объем кода, так как переопределения требуют всего 
несколько значений. Давайте рассмотрим пример. 


Взгляните на следующий С55-код, определяющий стиль кнопки, показанной 
на рис. 1.4: 


раа41т=: брх 16рх; 

Богаег: 1рх $0114 #446488; 

раскегоипа: #58а 1іпеаг-ргааіепі (#77аеьЬь, #58а); 
Богаег-га@1и$: 4рх; 

рох-ѕһайом: 0 1рх 5рх вгау; 

со1ог: мһі+е; 

Техі-ѕһайом: 0 -1рх 1рх #335166; 

Фоп*-$12е: 20рх; 

Ііпе-һеівһё: 30рх; 


Этот код порождает несколько проблем сопровождаемости, но в наших силах 
от них избавиться. Первое, что бросается в глаза, — это параметры шрифта. 
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Если мы решим изменить размер шрифта (напри- ме 
5 
мер, создать вариацию для более важных и крупных 


кнопок), то нам придется также исправить интер- 

вал между строками, так как оба этих параметра Рис. 1.4. Кнопка, которую мы 
заданы абсолютными значениями. Помимо этого,  бУАем использовать в нашем 
интервал между строками никак не отражает его 18Р 

взаимосвязи с размером шрифта, поэтому в случае 

необходимости использовать шрифт иного размера нам придется делать вы- 
числения, подбирая подходящий интервал. Когда значения зависят друг от 
друга, старайтесь отражать эти взаимозависимости в коде. В данном случае 
интервал между строками составляет 150% размера шрифта. Следовательно, 
было бы намного удобнее явно показать это в коде: 


Фоп*-$12е: 20рх; 
Ііпе-һеірһё: 1.5; 


И раз уж мы все равно здесь, давайте разберемся, почему мы задали размер 
шрифта абсолютным значением? Определенно, с абсолютными значениями 
удобно работать, но они втыкают вам нож в спину каждый раз, когда код тре- 
бует хотя бы малейших изменений. Сейчас, если вы решите сделать размер 
родительского шрифта больше, вам потребуется поменять каждое правило 
в таблице стилей, в котором для шрифтов задаются абсолютные параметры. 
Гораздо лучше использовать проценты или единицы длины епт: 


Фоп*-$12е: 125%; /* Предполагаем, что размер родительского шрифта 16рх */ 
Ііпе-һеірһі: 1.5; 


Теперь, если мы поменяем размер родительского шрифта, кнопка моменталь- 
но увеличится. Однако выглядеть она будет по-другому (рис. 1.5), так как все 
остальные эффекты были подогнаны под кнопку меньшего размера и не мас- 
штабируются. Мы можем сделать масштабируемыми также и другие эффекты, 
задавая все значения в ем, чтобы они все зависели от 
размера шрифта. Таким образом, мы будем в состо- 
янии управлять размером кнопки из одного места: Үе © | 

е 


рааа1т=: „Зет .8ет; 
Богаег: 1рх $0114 #446488; 
Баскёгоипа: #58а 11пеаг-вгад1еп*(#77а9бб, #58а); Рис. 1.5. Увеличение размера 


Богдег-гад91и$: .2ет; шрифта ломает другие 
Бох-5Надом: 0 „.05ет .25ет эгау; эффекты, применяемые 
со1ог: мһі+е; к кнопке (заметнее всего это 
Техі-ѕһайом: Ө -.05ет .05ет #335166; со скруглением углов), так 
Ғопё-5іғе: 125%; как они заданы в абсолютных 


1іпе-һеірһі: 1.5; значениях 
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Үеѕ! 





Рис. 1.6. Теперь мы 
можем сделать кнопку 
больше, и эффекты будут 
масштабироваться вместе 
с ней 


Здесь мы хотим, чтобы размер 
шрифта и прочие параметры 
определялись относительно 
размера родительского шриф- 
та, поэтому используем ет. 

В некоторых случаях нужно, 
чтобы они задавались отно- 
сительно размера корневого 
шрифта (то есть размера 
шрифта в <ћёт1>), и тогда 
использование ет приводит 

к сложным вычислениям. 

В таких ситуациях можно при- 
менять единицы длины гет. 
Относительность — важное 
свойство в С55, но всегда 
необходимо думать, от- 
носительно чего вы задаете 
те или иные значения. 


СОВЕТ 


Используйте Н$ГА вместо 
АСВА для полупрозрачного 
белого — там меньше сим- 
волов и нет повторений, что 
позволяет быстрее набирать 
код. 


Теперь наша крупная кнопка больше похожа на 
масштабированную версию оригинала (рис. 1.6). 
Обратите внимание, что для некоторых параметров 
мы оставили абсолютные значения. Какие эффекты 
должны масштабироваться с изменением размера 
кнопки, а какие оставаться прежними — решать 
вам, это дело вкуса. В данном примере мы хотим, 
чтобы толщина рамки оставалась равной 1рх неза- 
висимо от габаритов кнопки. 


Но изменение размера кнопки в большую или мень- 
шую сторону не единственное, что мы можем захо- 
теть с ней сделать. Часто возникает необходимость 
изменить цвет кнопок. Например, мы хотим создать 
красную кнопку Сапсе! или зеленую кнопку ОК. В те- 
кущей реализации нам потребовалось бы для этого 
переопределить четыре объявления (Богдег-со1ог, 
расквгоипа, бох-ѕһайом, ех - ѕһайом), не говоря уже 
о трудностях с пересчетом разнообразных, более 
темных или светлых вариаций нашего главного цве- 
та, #58а и гадании, насколько светлее или темнее ис- 
ходного оттенка должен быть каждый из них. А что, 
если мы захотим поместить нашу кнопку на другой 
фон, отличный от белого? Серый (вгау) в качестве 
цвета тени хорошо смотрится только на белом фоне. 


Мы можем без труда избавиться от подобных слож- 
ностей, накладывая на главный цвет полупрозрач- 
ный белый и черный для получения более светлых 
или более темных вариаций соответственно: 


раа41т5: „Зет . Зет; 

Богаег: 1рх $0114 грба(0,0,0,.1); 

раскегоипа: #58а 1іпеаг-ргадіепё(ћѕ1а 
(0,0%,100%,.2), +гапѕрагеп+); 

рогӣег-гааіиѕ: .2ет; 

Бох-5Надом: Ө .05ет .25ет грба(0,0,0,.5); 

со1ог: мһі+е; 

Техі-ѕһайом: Ө -.Ө5бет .05ет грба(0,0,0,.5); 

ҒопЁ-5іғе: 125%; 

Ііпе-һеірһі: 1.5; 


Теперь для создания вариаций с разными цветами 
нам нужно всего лишь переопределить БасКвгоипа- 
со1ог (рис. 1.7): 
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Биї+оп. сапсе1 { 
Баскёгоипа-со1ог: #с00; Сапсеі 
} 


Биё+оп.ок { Рис. 1.7. Все, что нам 
браскегоипа-со1ог: #660; потребовалось для создания 
|: этих цветных вариаций, — 


изменить цвет фона 


Наша кнопка уже стала намного более гибкой. Но этот пример не демонстрирует 
всех возможностей реализации в вашем коде принципов ОКУ. В следующих 
разделах вы найдете еще несколько полезных советов. 


Соп ровождаемость или лаконичность 


Иногда сопровождаемость и лаконичность кода становятся взаимоисклю- 
чающими свойствами. Даже в предыдущем примере финальная версия кода 
оказалась немного длиннее исходной. Рассмотрим следующий фрагмент, пред- 
назначенный для создания рамки толщиной 10рх с каждой стороны элемента, 
за исключением левой: 


Богдег-міаєһ: 10рх 10рх 10рх е; 


Здесь всего одно объявление, но для того, чтобы изменить толщину рамки, нам 
пришлось бы сделать три исправления. Гораздо проще было бы редактировать 
этот код, если бы в нем было два объявления, и, возможно, в этом случае он 
также стал бы читабельнее: 


Богдег-міаёћһ: 10рх; 
богдег-1Іеғі-міаёһ: ө; 


сиггепСоіог 


В С$5$ уровня З (№ р://м3З.огд/ТВ/с$$3-со!ог) у нас появилось много новых клю- 
чевых слов для обозначения цвета, таких как 1ірһёро1аепгойуе11ом, польза 
которых сомнительна. Однако для работы с цветом нам также дали особое 
новое ключевое слово, позаимствованное из ЗУС: сиггепСо1ог. Ему не соот- 
ветствует никакое статичное значение цвета. В действительности оно всегда 
разрешается в значение свойства со1ог, что, по сути, делает его первой когда- 
либо существовавшей переменной в С$$. Переменной с очень ограниченными 
возможностями, но все же переменной. 


Например, предположим, что мы хотим, чтобы все горизонтальные разделите- 
ли (все элементы <һг>) автоматически окрапгивались в цвет текста. Благодаря 
сиггепСо1ог мы можем реализовать это следующим образом: 
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Кто-то может утверждать, что 
на самом деле первой пере- 
менной в С55 была единица 
длины ет, ссылающаяся на 
значение Ғопё-ѕіғе. Боль- 
шинство процентных зна- 
чений играют схожую роль, 
хотя и выглядят куда менее 
вдохновляюще. 


Уоиг изегпате: 


Іеауегоц 


Ошу1ецегз, пигаБегз, ипдегзсоге$ 
(_) апа һурһепз (-) аШомеа! 


Рис. 1.8. Выноска, на 
которой указатель наследует 
цвет фона и рамку от 
родительского элемента 


Ве { 
һеірһ: . беп; 
Баскёгоипа: сиггепЕСо1ог; 


Возможно, вы заметите, что многие существующие 
свойства ведут себя очень похоже. Например, если 
при описании рамки не задавать цвет, то она авто- 
матически получает цвет текста. Причина в том, что 
сипгепЕСо1ог также служит исходным значением 
многих цветовых свойств СЗ: рогаег-со1ог, цветов 
тех - ѕһайом и бох-ѕһайом, оц{11пе-со1ог и др. 


В будущем, когда у нас появятся функции для управ- 
ления цветами в чистом С$$, сиггепЕСо1ог станет 
еще полезнее, так как мы сможем использовать 
различные вариации этого значения. 


Наследование 


Хотя большинство разработчиков знают о суще- 
ствовании ключевого слова іпћегі+, о нем часто 
забывают. Ключевое слово іпһегіё можно исполь- 
зовать в любом свойстве С$$, и оно всегда соот- 
ветствует вычисленному значению родительского 
элемента (для псевдоэлементов это элемент, для 
которого они были сгенерированы). Например, вы 
хотите, чтобы в элементах формы использовался 
тот же шрифт, что и для всей остальной страницы. 
Для этого не нужно указывать его еще раз, просто 
используйте 1пнегае: 


іприё, ѕе1есі, Би++оп { +Ғопі: іпһегі+; } 


Аналогично, можно с помощью 1ппег1* окрасить 
гиперссылки в тот же цвет, что и остальной текст: 


а { со1ог: іпһегі+; } 


Ключевое слово іпһегі+ также часто бывает удоб- 
но использовать для оформления фона. Напри- 
мер, чтобы создавать выноски, в которых ука- 
затель автоматически наследует фон и рамку 
(рис. 1.8): 
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.са11оиї { ро$1%1оп: ге1аёіуе; } 


.са11оиї: : Бефоге { 
сопёепі: ""; 
роѕіёіоп: арѕо1и+е; 
Фор: -.4ет; Іе+ё: 1еп; 
райаіпе: .„35ет; 
раскегоипа: 1пПег1{; 
Богаег: іпһегі+; 
рогдег-гірһі: 0; 
рогаӣег-боё+от: 0; 
їгапѕҒогт: гобёа+е(45дер); 


Доверяйте глазам, а не числам 


Человеческий глаз — далеко не идеальное устройство 
ввода. Иногда точные измерения приводят к резуль- 
татам, которые кажутся нам неаккуратными, и это 
необходимо учитывать при разработке дизайна. На- 
пример, в литературе, посвященной визуальному ди- 
зайну, всегда особо подчеркивается тот факт, что наши 
глаза не способны правильно воспринимать объекты, 
выровненные по вертикали. Для того чтобы создать 
впечатление, что объект центрирован по вертикали, 
его необходимо поместить чуть выше геометрической 
середины. Вы можете убедиться в существовании 
данного явления, посмотрев на рис. 1.9. 


Схожая особенность существует и в дизайне шриф- 
тов: круглые символы, такие как «О», должны быть 
немного крупнее прямоугольных, так как наше вос- 
приятие круглых форм искажено и нам кажется, 
что они меньше, чем на самом деле. Вы найдете 
подтверждающий это пример на рис. 1.10. 


Подобные оптические иллюзии очень распростра- 
нены в любых формах визуального дизайна, и вы 
не должны забывать о них. Самый известный при- 
мер — пустые поля в контейнерах с текстом. Эта 
проблема возникает всегда, независимо от объема 
текста, — контейнер может содержать как одно 
слово, так и несколько абзацев. Если задать поля 
одинакового размера по всем четырем сторонам 
контейнера, то в результате они будут казаться нам 





Рис. 1.9. На первом прямоу- 
гольнике коричневый квадра- 
тик математически выровнен 
по вертикали, но нам так не 
кажется. На втором прямоу- 
гольнике квадратик находит- 
ся чуть выше геометрическо- 
го центра, но человеческий 
глаз видит его так, словно 
он находится точно 

в центре 








Рис. 1.10. Кажется, что круг 
меньше, но ограничивающая 
его рамка по размеру совпа- 


дает с квадратом 
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Рис. 1.11. Поля одинакового 
размера (здесь: .5ет) 

по всем четырем сторонам 
контейнера с текстом создают 
впечатление, что сверху 

и снизу пустого пространства 
больше 


уоЇо 





Рис. 1.12. Мы определили 
более широкие поля (здесь: 
.Зет .7ет) слева и справа, 

и теперь контейнер с текстом 
выглядит намного более 
сбалансированным 


СОВЕТ 


Попробуйте в своих медиа- 
запросах вместо пикселов 
использовать единицы дли- 
ны ет. Это позволит сделать 
так, чтобы изменения макета 
инициировались также при 
масштабировании текста. 


неодинаковыми, как видно на рис. 1.11. Причина 
в том, что буквы вытянуты по вертикали, а сверху 
и снизу скруглены, и наши глаза воспринимают это 
дополнительное пространство как дополнительное 
поле. Следовательно, сверху и снизу необходимо 
задавать поля меньшего размера, для того чтобы 
в итоге поля со всех сторон выглядели одинаковыми. 
Это различие иллюстрирует рис. 1.12. 


Об отзывчивом веб-дизайне 


Отзывчивый веб-дизайн (Кеѕропѕіуе \МеЬ Оезеп, 
КҰР”) остается повальным увлечением вот уже 
несколько лет. Однако ударение зачастую делается 
на том, как важно, чтобы веб-сайты были «отзыв- 
чивыми», а о множестве других преимуществ, ко- 
торые обеспечивает следование принципам ВМР, 
умалчивается. 


Распространенная практика заключается в том, что 
веб-сайт тестируется со многими вариантами разре- 
шения экрана, а возникающие проблемы решаются 
путем добавления все новых и новых медиазапросов. 
Однако каждый медиазапрос делает С5$-код еще 
более сложным для внесения будущих правок, 
поэтому к их созданию не следует относиться лег- 
комысленно. Каждая будущая правка в С$5-коде 
требует проверки, зависит ли от нее срабатывание 
медиазапросов и, возможно, также обновление этих 
медиазапросов. Об этом часто забывают, что приводит 
кавариям. Чем больше медиазапросов вы добавляете, 
тем более хрупким становится ваш С$5-код. 


Ноя не говорю, что использование медиазапросов — 
однозначно плохая практика. При правильном при- 
менении они могут быть незаменимыми. Однако 
прибегать к ним следует лишь как к последнему 
средству, после того как все остальные попытки 
сделать дизайн веб-сайта гибким провалились, или 
жеесли мы намереваемся полностью менять опреде- 
ленный аспект дизайна при отображении на экране 
меньшего/большего размера (например, делать 
боковую врезку горизонтальной). Суть в том, что 
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медиазапросы не обеспечивают постоянства исправления ошибок. Они опре- 
деляют своего рода пороги (также известные как точки прерывания), и если 
весь остальной код написан так, чтобы обеспечивать гибкость продукта, то ме- 
диазапросы будут лишь исправлять результат для определенных разрешений, 
по сути, заметая проблемы под ковер. 


Разумеется, нет необходимости повторять, что пороги для срабатывания 
медиазапросов должны диктоваться не конкретными устройствами, а самим 
дизайном. И не только потому, что существует слишком много разнообразных 
устройств, на которых веб-сайт должен хорошо смотреться в любом возможном 
разрешении (особенно если учитывать также будущие разработки), но и потому, 
что на настольном компьютере веб-сайт может просматриваться в окне любого 
размера. Если вы уверены, что ваш дизайн хорошо работает на экране любого 
возможного размера, то какая вам разница, какое разрешение поддерживают 
конкретные устройства? 


Следование принципам, описанным в разделе «Минимизируйте дублирование 
кода», также помогает в реализации гибкого дизайна, ведь вам не приходится 
переопределять лишние объявления в медиазапросах, что в конечном итоге 
минимизирует сопутствующие им издержки. 


Вот еще несколько советов, как избежать ненужных медиазапросов: 


О используйте процентные, а не фиксированные значения ширины. Когда это 
невозможно, используйте единицы длины, привязанные к окну просмотра 
(ум, уп, утіп, утах), которые разрешаются в дробные части от ширины или 
длины окна просмотра; 


О если вам требуется фиксированная ширина для большего разрешения, ис- 
пользуйте тах-міа+п, а не міа+ћ, для того чтобы дизайн мог адаптироваться 
к меньшему разрешению без помощи медиазапросов; 


О незабывайте устанавливать значение 100% для свойства тах-міа+ћ заменяемых 
элементов, таких как іте, орјесі, уійео и іҒгате; 





О если фоновое изображение должно покрывать контейнер целиком, реали- 
зовать это можно с помощью баскегоипа-ѕігле: соуег, независимо от размера 
требуемого контейнера. Однако помните, что пропускная способность не 
бесконечна и не всегда разумно добавлять большие изображения, которые 
будут масштабироваться посредством С$5 для дизайна, предназначенного 
для экранов мобильных устройств; 


О выстраивая изображения (или другие элементы) в сетку из строк и столб- 
цов, делайте так, чтобы количество столбцов диктовалось шириной окна 
просмотра. С этим вам могут помочь макет гибкого поля (также известный 
как ЕІехБох — Е1ехіЫе Вох Гауоиї) и аіѕр1ау: іп1іпе-Ь1оск и обтекание 
обычным текстом; 
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О при использовании столбцов для отображения текста указывайте со1итп- 
міа+ћ, а не со1итп-соип, для того чтобы в маленьком разрешении весь текст 
выводился только в одном столбце. 


В целом, идея заключается в том, чтобы стремиться к текучим макетам и за- 
данию размеров между точками прерывания медиазапросов с помощью от- 
носительных значений. Когда дизайн достаточно гибок, сделать его отзывчивым 
можно с помощью всего лишь пары коротких медиазапросов. Дизайнеры из 
Ваѕесатр говорили в точности об этом в конце 2010 года: 


Выясняется, что создание макета, работающего на широком диапазоне 
устройств, — это, по сути, вопрос добавления пары медиазапросов С$$ к го- 
товому продукту. Ключ к тому, чтобы это оказалось для вас простейшей 
задачей, кроется в гибкости макета. Когда макет уже сам по себе текучий, 
оптимизировать его для небольших экранов означает всего лишь схлопнуть 
несколько полей для максимизации доступного пространства и скорректировать 
расположение боковых врезок для случаев, когда экран слишком узкий, чтобы 
на нем уместились два столбца. 


Ехрентеп тд мВ гезроп&ме еѕідп т ЦКегаНоп$ 
(Һр://ѕідпаімпоіѕе.сот/роѕ5/2661-ехрегітепііпо-уміһ- 
геѕропѕіме-аеѕідп-іп-іќегайопѕ) 


Если вы внезапно поняли, что вам требуется целая куча медиазапросов, чтобы 
адаптировать дизайн к экрану меньшего (или большего) размера, сделайте шаг 
назад и еще раз проанализируйте структуру своего кода, так как велика вероят- 
ность, что отзывчивость — не единственная ваша проблема. 


Используйте сокращения с умом 


Как вы, вероятно, знаете, следующие две строки С55-кода не эквивалентны: 
раскегоипа: гебессаригр1е; 


раскегоипа-со1ог: герессаригр1е; 


В первой строке используется сокращение, которое всегда обеспечивает фон, 
равномерно залитый цветом гебессаригр1е. Элемент же, для которого использо- 
вана полная запись (баскегоипа-со1ог), может в результате содержать розовый 
градиент, фотографию кошки или что угодно еще, поскольку на него может рас- 
пространяться действие объявления басквгоипа-ітаре. Эта проблема чаще всего 
возникает именно при использовании полной записи: вы не сбрасываете значения 
всех остальных свойств, которые могут влиять на то, чего вы пытаетесь достичь. 
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Разумеется, можно попытаться задать значения всех свойств в полной записи 
и заявить, что дело сделано, но с высокой вероятностью какие-то вы все же 
забудете. Или же рабочая группа С$5 представит в будущем больше вариан- 
тов полной записи, а в вашем коде не будет предусмотрено сбрасывания этих 
свойств. Не бойтесь сокращений. Это хороший защитный стиль кодирования, 
подготавливающий ваш код к будущим изменениям. Тем не менее иногда вы 
можете намеренно использовать каскадные свойства для всего остального, 
как мы сделали с цветными вариантами кнопок в разделе «Минимизируйте 
дублирование кода». 


Полные варианты записи также бывает удобно применять в комбинации с со- 
кращениями, для того чтобы делать код более емким (в соответствии с прин- 
ципом ОБУ) в свойствах, значения которых представляют собой списки с раз- 
делительной запятой, таких как свойства БасКегоипа. Лучше всего объяснить 
это на примере: 


Баскёгоипа: иг1(+г.рпё) по-переа+ Фор г1ей / 2ет 2епт, 
иг1(6г.рпё) по-переат Бо{Фот г1ей{ / 2ет 2епт, 
иг1 (61.рпё) по-гереат боот 1еРЕ / 2ет 2ет; 


Обратите внимание, что значения Басквгоипа- ѕіхе и баскегоипа-гереаї повто- 
ряются три раза, несмотря на то что для всех изображений они одинаковые. 
Мы можем воспользоваться преимуществом одного из правил разворачивания 
списков С55, которое гласит, что если указано только одно значение, то оно 
разворачивается и распространяется на все элементы в списке. Это позволит 
нам переместить повторяющиеся значения в свойства с полной записью: 


Баскёгоипа: иг1(+г.рпе) фор г1ей+, 
иг1(6г.рп) боот гієһћ+, 
иг1(61.рпе) боот 1Іе++; 

Баскргоипа-ѕіғе: 2ет 2еп; 

БасКёгоипа-гереа*: по-гереат; 


Теперь значения Баскегоопӣ- ѕіхе и БасКвгоипа-гереа* можно изменить с помо- 
щью всего одной правки вместо трех. Вы будете сталкиваться с применением 
этой техники на протяжении всей книги. 


Нужно ли использовать препроцессор? 


Вы наверняка слышали о препроцессорах С55, таких как Е55 (ћр://1е<сѕ.огд), 
Ѕаѕѕ (Нр://зав$-апд.сот) и Ѕсу1Іиѕ (Һр://5уіиѕ-Іапо.сот/). Они предлагают несколько 
удобных инструментов для разработки С5$, таких как переменные, примеси, 
функции, вложенные правила, манипулирование цветом и многие другие. 
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При правильном использовании они помогают делать код более гибким в круп- 
ных проектах, когда возможностей одного только С55 становится недостаточно. 
Мы всегда стремимся создавать надежный, гибкий и емкий С5$-код, но иногда 
ограничения самого языка оказываются непреодолимыми. С другой стороны, 
сами препроцессоры также способны создавать определенные сложности: 


О вы теряете контроль над размерами файлов и сложностью вашего С58-кода. 
Емкий, краткий код после компиляции может превратиться в исполинское 
чудище, которое вам придется пересылать по проводам; 


О задача поиска и устранения ошибок становится сложнее, так как С$$-код, 
который вы видите в инструментах разработки, — это не тот С$$-код, кото- 
рый вы пишете. Эту проблему несколько смягчает появление новых инстру- 
ментов отладки в 5оиғсеМарѕ. зоитсеМарз — это новая классная технология, 
назначение которой — устранять подобные сложности. Это достигается за 
счет того, что она с точностью до номера строки сообщает браузеру, какой 
С55-код препроцессора какому сгенерированному С55-коду соответствует; 


ЗАНИМАТЕЛЬНАЯ СТРАНИЧКА. 
СТРАННЫЙ СОКРАЩЕННЫЙ СИНТАКСИС 


Возможно, вы заметили, что в предыдущем примере в сокращенном вари- 
анте Басквгоипа после определения баскегоипаӣ- ѕіғе необходимо также 
указывать значение Баскёгоипа-ро$11оп (даже если оно не отличается 
от первоначального) и отделять его слешем (/). 


Это практически всегда делается в целях разрешения противоречий. Опре- 
деленно, в примере выше очевидно, что фор гівһе — это браскегоипа- 
ро$11оп, а 2ет 2ет — раскегоипа- ѕіғе, независимо от того, в каком по- 
рядке они указаны. Однако представьте, что мы используем значения вроде 
50% 50%. Что это — БасКвгоипа-$1те или баскегоипа-роѕіёіоп? Когда вы 
используете полную запись, парсер С55 сразу понимает, что имеется в виду. 
Однако в сокращении, где нет никаких имен свойств, парсеру необходима 
подсказка, для того чтобы понять, к чему относится это 50% 50%. Вот для 
чего служит слеш. 


С большинством сокращений подобных проблем с необходимостью устра- 
нения неоднозначности не возникает, и для них значения свойств можно 
перечислять в любом порядке. Однако всегда сверяться с точным синтак- 
сисом во избежание неприятных сюрпризов — это хорошая практика коди- 
рования. Если вы знакомы с регулярными выражениями и грамматиками, 
то можете также проверить грамматику для свойства в соответствующей 
спецификации; это, вероятно, самый быстрый способ узнать, определен ли 
какой-то конкретный порядок. 
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О из-за препроцессоров в процессе разработки могут возникать определенные 
задержки. Хотя в целом эти инструменты работают довольно быстро, ком- 
пиляция кода в С$5 все же требует какого-то времени, и вам приходится 
выжидать пару секунд, прежде чем вы сможете проверить результат; 


О каждая новая абстракция порождает дополнительные усилия, которые 
кому-то придется затратить, чтобы начать работу с нашим кодом. Нам нужно 
либо сотрудничать только с хорошо знакомыми с диалектом людьми, либо 
обучать их этому диалекту. Таким образом, мы либо ограничены в выборе 
соавторов, либо обязаны потратить дополнительное время на обучение; 
оба варианта малопривлекательны; 


О идавайте не забывать о законе протекающих абстракций: «Все нетривиаль- 
ные абстракции в той или иной степени допускают утечку». Препроцессоры 
пишутся людьми, и, как и любая нетривиальная программа, когда-либо на- 
писанная человеческими существами, они содержат собственные ошибки, 
могущие быть весьма коварными, ведь мы обычно даже не подозреваем, 
что причина проблем с нашим С$$-кодом может скрываться в коде пре- 
процессора. 


Помимо проблем, перечисленных выше, существует также риск привыкания 
к препроцессорам, когда разработчики продолжают использовать их, даже если 
необходимость в этом отсутствует, — в небольших проектах или в будущем, 
после того как их любимые возможности уже добавляются в чистый С55. Удив- 
лены? Да, многие возможности, вдохновленные препроцессорами, в итоге 
оказались частью чистого С$$: 


О уже существует черновик, озаглавленный С$$ Сиѕќот Ргорегііеѕ ѓог Саѕса- 
іпе УагіаЫеѕ и описывающий пользовательские свойства с функциональ- 
ностью переменных (НЁр://м3.огд/ТВ/с$$-уайаЫес-1); 


О функция са1с() из С$$ Уаше$ & Опіёѕ Геуе] 3 — это не просто мощный 
инструмент выполнения вычислений; уже сегодня реализована ее широкая 
поддержка; 


О функция со1ог() из С$$ Со]ог Геуе| 4 (һёр://еу.3.ого/сѕѕуд/сѕѕсоіог) дает 
возможность манипулировать цветом; 





О врамках рабочей группы С$$ ведутся серьезные обсуждения вложенности, 
и в прошлом даже существовала посвященная этому черновая спецификация. 


Обратите внимание, что «родные» возможности, подобные этим, обычно намно- 
го мощнее заменителей, предоставляемых препроцессорами, благодаря своей 
динамичности. Например, препроцессор не имеет ни малейшего представления 
о том, как выполнять вычисления вроде 100% - 5@рх, так как значение, в которое 
должны разрешиться эти проценты, неизвестно до тех пор, пока страница не 
будет фактически визуализирована. Однако у функции са1с() из чистого С85 
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нет никаких сложностей с оценкой подобных выражений. Схожим образом по- 
добное использование переменных невозможно в случае, если это переменные, 
предоставляемые препроцессором: 


(1 { --ассепі-со1ог: ригр1е; } 
01 { --ассепі-со1ог: гебессаригр1е; } 
11 { баскегоипа: уаг(--ассеп*-со1ог); } 


Вы понимаете, что мы сделали? В качестве фона элементов списка в упоря- 
доченных списках будет использоваться цвет гебессаригр1е, тогда как в не- 
упорядоченных списках элементы будут отображаться на фоне цвета ригр1е. 
Попробуйте добиться этого с препроцессором! Разумеется, в данном случае мы 
МОГЛИ бы всего лишь использовать селекторы-потомки, но суть примера в том, 
чтобы продемонстрировать динамичность этих переменных. 


Муғћ 


С55 {Ве мау К маѕ ітаріпеа. 


Му! Ба ргергосеззог па е!{$ уоиміќе риге С55 муїћоџї ауіпр їо 
моту абоџёѕіом бгомѕег ѕиррогї, огемеп 51ом рес арргомаі. 
№'$ ЕТеу А 





Рис. 1.13. Муїћ (ВЕр://ту.10) — это экспериментальный препроцессор, который, вместо того 
чтобы использовать собственный синтаксис, эмулирует «родные» возможности С55, по сути, 
играя роль полифилла С55 


Так как большинство из упомянутых выше возможностей чистого С$$ сегодня 
поддерживаются еще недостаточно хорошо, очень часто, если сопровождаемость 
кода важна для вас (а это должно быть так), использования препроцессоров 
не избежать. Я советую начинать каждый проект с чистого С$5 и прибегать 
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к помощи препроцессора только в том случае, если 
при реализации необходимой функциональности 
становится невозможно соблюдать принципы ОКУ. 
Для того чтобы не впасть в полную зависимость 
от препроцессоров и не использовать их в тех си- 
туациях, когда они в действительности не нужны, 
подключение препроцессора к проекту всегда 
должно быть осознанным решением, а не бездум- 
ным первым шагом, который по умолчанию делается 
в каждом новом проекте. 


Не забывайте, что для мани- 
пулирования этими и другими 
«родными» возможностями 
С55 можно также использо- 
вать сценарии. Например, 
поменять значение перемен- 
ной можно в коде 35. 





Фон и рамки 2 


1 Полупрозрачные рамки 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 
Знание цветов ВСВЅ/НЅІА 


Проблема 


Вам, вероятно, достаточно часто приходилось возиться с инструментами соз- 
дания полупрозрачных цветов в С55, такими как гвба() и һѕ1а(). В 2009 году, 
когда мы, наконец, получили возможность использовать их в своем дизайне, они 
произвели настоящий фурор — и это несмотря на необходимость продумывать 
пути отхода, разнообразные «костыли» и даже уродливые поделки с фильтрами 
в [Е для самых отважных. Однако их применение в промышленных условиях 
ограничивалось в основном фонами. Существует три главные причины, почему 
так происходило: 


О часть первых экспериментаторов не поняла, что эти новые цветовые форматы 
в действительности были обычными цветами, такими как #0066 и огапве, 
и работала с ними как с изображениями, используя только для фонов; 


О обходные пути было намного проще реализовать для фонов, чем для любых 
других свойств. Например, альтернативным решением для полупрозрач- 
ного фона могло быть простое полупрозрачное изображение площадью 
в один пиксел. Для других свойств единственной альтернативой оставался 
сплошной цвет; 


О применение их для других свойств, таких как рамки, зачастую оказывалось 
делом далеко не простым, и скоро мы узнаем почему. 


1. Полупрозрачные рамки 51 





АЯТІСІЕ 


ітрокќапі поќе 


з0ес. 





Мапу оѓ уои Рауе ргобабу зееп ту С353 рапегта давегу.  оесате хегу рориағ 
оодһои Фе ува апа И ѕзһомед тапу мео деуеіорегз һом ромле А С553 
огафегіз геаїу аге. Ви! пом тапу геаїу ипбегкапа һом ћезѕе рапегпз зге 
сгез!е0? Те одет! репе о! С55-депегаіес баскогоипаз № а! ћеу сап бе 
оа Мого тобе госту міс те зуе зое! Тпіз бепе! із усій И ме аге ўиз: соруіпо апа 
разіго С33 собе ме доп“ ипбегвіага. Ме тау аз мой зе а баёз ИЯ! пива. 


1л ай ће ехатріез за! (обом, ГИ Бе изіпо дгафегіз мло а уепоог ргейх, їог 
теабабку апа бгем'у. Номеуег, уои зћоџа кеер п тіпа гла! іл геаіу уои пеед о 
уве аі ће мепбог ргейхев ( о: - , -ва-, -о- , -меъкі- ав ПО беомзег 
сштепбу ітріетепёв ет мол а ргейх. АЛегтабмеўу, уои сома иве -ргобх-1сее 
ага Рауе ће ситегі мепдог ргеѓх ргерепаеа а! гипіте, опіу мћеп пеебес. 


Тре ѕугіах дезстед ћеге ів ће оге Па! Бгомизегв ситепіу ітріететі. Тһе 
ѕрессаёоп паз зіпсе спапоед, би! по Беочизег ітріетепіѕ е спапдез уе. М уои 
аге тегеѕѓеа іп мћаї |5 сотігуд, | 3499254 уои їаке а оок а! е дау увгзіоп ої Фе 











Рис. 2.1. 24\мауз.ога был одним из первых веб-сайтов, в дизайне которых еще в 2008 году 
использовались настоящие полупрозрачные цвета, хоть и для фонов 


(автор дизайна — Тим Ван Дамм) 


Предположим, что мы хотим для оформления кон- 
тейнера использовать белый фон и полупрозрачную 
белую рамку, сквозь которую будет просвечивать 
основной фон. Наша первая попытка, вероятно, 
будет выглядеть примерно так: 


Богаег: 10рх $0114 һѕ1а(0,0%,100%, .5); 


раскегоипа: мһі+е; 


Если у вас нет твердого понимания, как работают фоны 
и рамки, результат (показанный на рис. 2.2) может шо- 


22 


Можно мне 
полупрозрачную рамку? 
Чтоб было красиво? 







ПІІ 





Рис. 2.2. Наша первая 
попытка добиться эффекта 
полупрозрачной рамки 


кировать. Куда делась рамка? И если невозможно достичь эффекта полупрозрачной 
рамки, используя полупрозрачный цвет для рамки, то как это вообще сделать? 


Решение 


Хотя это и не очевидно, наша рамка на месте и никуда не делась. По умолчанию 
фон растягивается, заполняя в том числе область рамки, что можно легко про- 
верить, применив старый добрый эффект пунктирной рамки к элементу, для 
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Рис. 2.3. По умолчанию фон 
распространяется также и на 
область рамки 
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Рис. 2.4. Проблема решена 
с помощью свойства 
баскегоипа-с1ір 


• Фон и рамки 


которого определен фон (рис. 2.3). Это не играет 
особой роли, когда вы используете сплошные не- 
прозрачные рамки, но в нашем примере способно 
полностью изменить дизайн. Вместо полупрозрач- 
ной белой рамки, сквозь которую просвечивает 
прелестная фоновая картинка, мы получили полу- 
прозрачную белую рамку на непрозрачном белом 
фоне, которую не отличить от обычной белой рамки. 


В С$$ 2.1 фон именно так и работал. Нам нужно 
было просто смириться и продолжать жить с этим. 
К счастью, с появлением стандарта Васкегоипдѕ 
& Вогӣегѕ Геуе] З (Һіёр://%3.ого/ТА/сѕ53-раскдгоџпа) 
мы обрели возможность корректировать поведение 
фона в соответствии с насущными требованиями 
дизайна, применяя для этого свойство Басквгоипа- 
с1ір. Его первоначальное значение равно богаег-Бох, 
что означает, что фон обрезается по краю ограничи- 
вающей рамки. Если мы хотим, чтобы наш фон не 
растягивался под рамку, то для этого всего лишь 
нужно присвоить свойству значение рааа1тв-Бох, 
которое приказывает браузеру обрезать фон по 
краю забивки: 


Богаег: 10рх $0114 һѕ1а(0,0%,100%,.5); 
баскегоипа: мһћі+е; 
баскегоипа-с1ір: раааіпр-бох; 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесге(ѕ.іо/єғапѕіисепё-Богаегѕ 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Васкагоцпаѕ & Вогаегѕ: ћір://%3.ого/ТВ/с55-раскдгоипаѕ 


2 Несколько рамок 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Простейшие варианты использования Бох-$5Падом 


Проблема 


В стародавние времена, когда спецификация ВасКэтоип@$ & Вогаегѕ Геуе З 
(Пр://мЗ.ога/ТВ/с$3-Баскдгоипа) была еще на стадии черновика, в рабочей группе 
С$5 велось активное обсуждение вопроса, нужно ли разрешать использование 
сразу нескольких рамок — нескольких фоновых изображений. К сожалению, 
тогда все сошлись на том, что вариантов использования нескольких рамок 
слишком мало и разработчики всегда могут прибегнуть к помощи Богаег- 1табе 
для достижения того же эффекта. Однако рабочая группа упустила из виду 
важность наличия возможности гибко настраивать рамки в С55-коде, из-за 
чего разработчикам для имитации нескольких рамок пришлось прибегать 
к корявым трюкам вроде наложения друг на друга множества элементов. И все 
же существуют более удачные способы решения этой задачи, не приводящие 
к загрязнению кода бесполезными лишними элементами. 


Решение с использованием Бох-5Вадо\ 


К настоящему моменту большинство из нас уже имеет (слишком большой) опыт 
использования Бох-5Падом для создания теней. Однако мало кто знает, что это 
свойство принимает четвертый параметр (называемый радиусом размазывания, 
ѕртеаа тайіиѕ), который делает тень больше (положительные значения) или 
меньше (отрицательные значения) на указанную величину. Положительный 
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Рис. 2.5. Имитация контура 
с помощью свойства Бох- 
эпадом 





Рис. 2.6. Имитация двух 
контуров с помощью свойства 
Бох-ѕһайому 





Рис. 2.7. Добавление 
настоящей тени после 
«контуров» 


радиус размазывания в сочетании с нулевым сме- 
щением и нулевым размыванием создает «тень», 
больше похожую на сплошную рамку (рис. 2.5): 


Баскёгоипа: уе11омегееп; 
рох-ѕһайом: 0 0 0 10рх #655; 


Не слишком впечатляет, ведь точно такую же рамку 
можно создать с использованием свойства богаег. Но 
хорошая новость в том, что благодаря свойству Бох - 
ѕһайом мы можем создать сколько угодно рамок, 
просто разделив наборы значений запятой. То есть 
добавить к предыдущему примеру вторую рамку 
ярко-розового цвета деерріпк совсем несложно: 


Баскёгоипа: уе11оимегееп; 
рох-ѕһайом: 09 0 0 10рх #655, 0 0 Ө 15рх 
Яеерріпк; 


Единственное, о чем необходимо помнить, — что 
рамки, создаваемые свойством Бох-ѕһааом, наклады- 
ваются друг на друга, причем наверху оказывается 
та, которая в строке значений указана первой. На- 
пример, в предыдущем коде нам нужна была внеш- 
няя рамка шириной 5рх, поэтому мы указали радиус 
размазывания 15рх (10рх + 5рх). При необходимости 
после «контуров» можно добавить еще один набор 
значений для обычной тени: 


Баскёгоипа: уе11омегееп; 
рох-ѕһайом: 0 0 9 10рх #655, 

0 90 15рх йеерріпк, 

9 2рх 5рх 15рх грба(0,0,0,.6); 
Решение с тенью хорошо работает в большинстве 
случаев, но существует несколько тонкостей, о ко- 
торых не стоит забывать: 


О тени работают не совсем так, как рамки: они не 
влияют на макет и на них не распространяется 
действие свойства бох-ѕігіпе. Однако имити- 
ровать дополнительное пространство, которое 
заняла бы рамка, можно с помощью забивки или 
полей (в зависимости от того, определена тень 
как іпѕе+ или нет); 
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О продемонстрированный выше метод позволяет создавать фальшивые «рам- 
ки» снаружи элементов. Подобные рамки не умеют перехватывать события 
мыши, такие как наведение или щелчок. Если это важно для вас, то можно 
добавлять ключевое слово іпѕеё, чтобы тени рисовались внутри элемента. 
Помните только, что вам придется добавить больше забивки, чтобы обес- 
печить необходимое пространство. 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.с555есге1о/ппиНир!е-Бог4ег$ 


Решение с использованием оиНте 


В некоторых случаях, если нам требуются только две рамки, можно опреде- 
лить обычную рамку, а эффект внешнего контура создать с помощью свойства 
оц 11 пе. Это обеспечивает гибкость в выборе стиля рамки (а вдруг мы захотим, 
чтобы вторая рамка была пунктирной?), тогда как метод с Бох- Вадом позволяет 
создавать только сплошные рамки. Вот как в данном случае будет выглядеть 
код для создания эффекта, показанного на рис. 2.6: 


Баскёгоипа: уе11омёгееп; 
Богаег: 10рх $0114 #655; 
оиї1іпе: 15рх $0114 еерріпк; 


Что еще хорошо в контурах, так это то, что расстояние от границ элемента 
можно менять путем определения свойства оиё1іпе-о##ѕеё, которое способно 
принимать даже отрицательные значения. Это может быть полезно для создания 
целого ряда интересных эффектов. Например, на рис. 2.8 вы видите простой 
пример эффекта прошитого края. 


Однако у данного метода есть несколько ограни- 
чений: 


О как уже упоминалось выше, он подходит для 
определения только двух «рамок», так как свой- 
ство оц 11 пе не принимает список значений, раз- 
деленных запятой. Если вам требуется больше, то 
единственный вариант — прибегнуть к технике, Рис. 2.8. Используйте 


описанной в предыдущем разделе; отрицательное значение 
А ои1іпе-о#Ғѕеї с пунктирной 
Ч контуры не обязаны подчиняться своиству Богаег- — (дазпед) рамкой, чтобы 


гаа1и$, поэтому даже если углы рамки скругле- создать простейший эффект 
ны, контур может оказаться прямоугольным прошитого края 
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г я (рис. 2.9). Обратите внимание, что рабочая груп- 
па С$$ считает такое поведение ошибкой, и в 
будущем, скорее всего, поведение контуров будет 
изменено, для того чтобы действие Богаег-га@1и$ 
распространялось и на них тоже; 





Ҹ О согласно спецификации С$$ Оѕег Іпѓегѓасе 
Г.еуе! З (Һір://м3.ого/ТВ/с3-иі), «контуры могут 
быть не прямоугольными». Хотя в большинстве 


Рис. 2.9. Контуры, 
создаваемые с помощью 


свойства оиё1іпе, случаев они получаются прямоугольными, если 
не повторяют скругленные вы собираетесь пользоваться этим методом, мыс- 
очертания элемента, ленно отметьте, что результат следует тщательно 
но в будущем это может протестировать в разных браузерах. 

измениться 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Васкагоцпаѕ & Вогаегѕ: ћір://\%3.ого/ТВ/с55-раскагоипаѕ 
С55 Ваѕіс Оѕег Іпќегѓасе: Һ&р://\3.огд/ТК/с553-иі 


3 Гибкое позиционирование фона 


Проблема 


Довольно часто у нас возникает необходимость по- 
зиционировать фоновое изображение со сдвигом 
относительно не верхнего левого угла, а какого-либо 
другого, например правого нижнего. В С55 2.1 мож- 
но было либо задать сдвиг относительно верхнего 
левого угла, либо использовать ключевое слово для 
одного из остальных трех. Однако чаще всего мы 
все же хотим, чтобы между фоновым изображением 
и ближайшим углом оставалось немного пустого ме- 
ста (что-то вроде забивки), чтобы избежать эффекта, 
показанного на рис. 2.10. 


Для контейнеров фиксированного размера это 
возможно и средствами С$5 2.1, хотя решение 
получается не из простых: нужно подсчитать, ка- 
ким должен быть сдвиг фонового изображения 
относительно верхнего левого угла, отталкиваясь 
от фиксированной длины и ширины контейнера 
и желаемого сдвига относительно правого нижнего 
угла. Однако для элементов переменного размера 
(вследствие того, что их содержимое может ме- 
няться) это невозможно. В итоге разработчикам 
приходилось задавать приблизительные значения, 
например указывать местоположение фона про- 
центным значением немного меньше 100%, скажем 
95%. Определенно, в современном С$5 должен 
найтись способ получше! 


Соае Рігаїе 





Рис. 2.10. Баскёгоипа- 
ро$11оп: босом гівћ; 
обычно не обеспечивает 
приятного глазу результата, 
так как изображение 
вплотную прижимается 

к сторонам контейнера 
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Решение с использованием расширенного свойства 


раскагоипа-роѕііоп 


Соае Рігаїе { | 


><. 


Рис. 2.11. Задание сдвига 
относительно разных сторон 
контейнера; фоновое 
изображение здесь обведено 
пунктирным контуром, чтобы 
было понятнее, как работает 
СДВИГ 





Рис. 2.12. Необходимо 
указать обходной путь, 

чтобы пользователи старых 
браузеров не натолкнулись на 
подобную картину 





В С$$ ВасКэгоипа$ & Вог4ег$ Геуе 3 (ћёр://№3.ого/ 
ТВ/с$$3-Баскдгоипа) свойство браскегоопа-роѕіёіоп 
было обновлено и теперь поддерживает задание 
сдвига относительно любого угла — для этого перед 
значениями сдвига необходимо указывать опреде- 
ленные ключевые слова. Например, если мы хотим, 
чтобы наше фоновое изображение было сдвинуто на 
2@рх от правого края контейнера и на 10рх от нижнего 
края, то мы можем использовать следующий код: 


БасКёгоипа: иг1(соде-р1гафе.зу8) по-гереа* #58а; 
БасКёгоипа-ро$11оп: гірһі 20рх боот 10рх; 


Результат вы можете видеть на рис. 2.11. Последний 
шаг — обеспечить достойный путь отступления. 
Предыдущая версия кода приведет к тому, что в бра- 
узерах, которые не поддерживают расширенный 
синтаксис басквгоипа -роѕітіоп, фоновое изображе- 
ние прилипнет к верхнему левому краю (позиция 
по умолчанию), что выглядит просто ужасно, не 
говоря уже о том, что текст при этом прочитать будет 
невозможно (рис. 2.12). Хорошим обходным путем 
будет добавление старой доброй позиции Бо от 
гівһ+ в сокращение басквгоџпа: 


БасКёгоипа: иг1 (соде-р1га*е.$\5) 


по-гереа{ Боффот гівһі #58а; 
браскегоипа-роѕі+іоп: гірһё 20рх боот 19рх; 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/ехепӣеа-Ьд-роѕійоп 


Решение с использованием Ббаскдгоипа-огідіп 


Один из самых распространенных случаев, когда требуется задать сдвиг отно- 
сительно угла контейнера, — необходимость совместить фоновое изображение 
с забивкой. Решение с использованием расширенного свойства Баскегоипӣ- 
роѕічіоп, которое мы рассмотрели выше, выглядело бы следующим образом: 
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рада1т=: 10рх; 
раскегоипа: иг1 (соде-р1гафе.5\5) по-гереае #58а; 
раскегоипа-роѕіїіоп: г1ейе 10рх боот 1@рх; 


Результат показан на рис. 2.13. Как вы видите, ре- 
шение работает, но оно не соответствует принципам Соде Рігаќе 
ОКУ! каждый раз при изменении ширины забивки 
нам необходимо обновлять это значение в трех раз- 
ных местах! К счастью, существует более простой 
способ добиться нужного эффекта, который к тому 
же автоматически учитывает значение забивки, без 
необходимости заново переопределять сдвиги. 





Рис. 2.13. Смещение 
фонового изображения 


Скорее всего, за свою карьеру веб-разработчика На расстояние, равное 
вы немало раз упоминали в коде такие вещи, как  ЗНачению забивки 

Баскргоипа-ро$141оп: Фор Іе#&;. Но задавались ли 
вы когда-нибудь вопросом, какой именно верхний 
левый угол имеется в виду под юр Іеї? Как вы, ве- 
роятно, знаете, каждый элемент состоит из трех 
полей (рис. 2.14): поля рамки, поля забивки и поля 
содержимого. На верхний левый угол какого из этих 
полей ориентируется свойство баскегоипа-роѕіёіоп? 


По умолчанию Ббаскегоипа-роѕіёіоп ссылается на 
поле забивки; это сделано для того, чтобы рамки 
не закрывали собой фоновые изображения. Сле- Рис. 2.14. Модель полей 
довательно, фор Іе#ё — это по умолчанию верхний 

левый внешний угол поля забивки. В Васкегоипаѕ 

& Вогӣегѕ Геуе] З (НЕр://\м3З.ога/ТВ/с$$3-Баскагоипа), однако, у нас появилось 
новое свойство, позволяющее изменить данное поведение: басквгоипа-огівіп. 
Его значение по умолчанию (вполне предсказуемо) равно рада1пв-Бох. Если 
изменить его на соптеп*-Бох, как в следующем фрагменте кода, то ключевые 
слова для обозначения стороны и угла, которые мы используем с БасКегоипа- 
роѕієіоп, будут ссылаться на край поля содержимого (по сути, это означает, что 
любые фоновые изображения будут сдвигаться относительно сторон/углов на 
величину забивки): 





рад4а1т=: 10рх; 

БасКёгоипа: иг1("сойе-ріга+е. ѕур") по-гереа{ #58а 
Боффот гірһ; /* или 100% 100% */ 

раскегоипа-огіріп: сопёепё -бох; 


Визуально результат выглядит точно так же, как на рис. 2.13, но код лучше со- 
ответствует принципам ОВУ, Помните также, что при необходимости эти две 
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Не забывайте добав- 

лять пробелы вокруг 

всех операций - и + 
внутри функции са1с(), ина- 
че синтаксический разбор 
вернет ошибку. Причина су- 
ществования этого странного 
правила кроется в необходи- 
мости обеспечить совмести- 
мость с будущими разработ- 
ками: в будущем внутри 
са1с(), возможно, будут раз- 
решены ключевые слова, 
а они могут содержать 
дефисы. 


техники можно совмещать! Если вам нужно, чтобы 
смещение в целом соответствовало величине за- 
бивки, но фоновое изображение все же было слегка 
сдвинуто внутрь или наружу, то можете исполь- 
зовать баскегоипа-огіріп: сопћеп - Бох совместно 
с дополнительными значениями смещения, опреде- 
ленными посредством баскегоипа-роѕі+іоп. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеёѕ.іо/раскдгоипа-огідіп 


Решение с использованием саіс() 


Давайте вспомним исходную формулировку задачи: мы хотим поместить наше 
фоновое изображение на расстоянии 1@рх от нижнего края и 20рх от правого 
края. Однако если мыслить в терминах смещения относительно верхнего левого 
угла, то нам требуется смещение на 100% - 20рх по горизонтали и на 100% - 10рх 
по вертикали. К счастью, функция са1с() позволяет выполнять подобные вы- 
числения и прекрасно поддерживает баскегоипа-роѕі+іоп: 


Баскргоипа: иг1("сойе-рігаёе. зи") по-гереа+; 
Басквгоипа-роѕіїіоп: са1с(100% - 20рх) са1с(100% - 10рх); 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесге(ѕ.іо/Баскдгоипа-роѕійїоп-саіс 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Васкагоцпаѕ & Вогаегѕ: ћір://%3.ого/ТВ/с55-раскдгоипаѕ 
С55 Маіиеѕ & Опіёѕ: Һр://%3.огд/ТЕ/с55-үаіиеѕ 


4 Внутреннее скругление 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Бох-ѕһайои, оц 11пе, секрет «Несколько рамок» 


Проблема 


Иногда нам требуется контейнер, скругленный толь- 
ко изнутри, внешние углы рамки/контура которого 
все так же остаются прямыми, как на рис. 2.15. Это 
интересный неизбитый эффект. Подобного эффекта 
легко добиться с помощью двух элементов: 


НТМЕ 


<діу с1а55=" ѕопеһіпе -теапіпеҒи1" ><аім> 
І Пауе а пісе ѕиБ+1е 1ппег гоипаіпе, 
аоп'© І 1оок ргеї+у? 

</аім></аім> 


.Ѕотеёһіпе-теапіпеғи1 { 
баскегоипа: #655; 
райаіпе: .Зет; 

} 

.ѕотеһіпе-теапіпе#Ғи1 > іу { 
баскегоипа: Тап; 
рогӣег-гааіиѕ: . Зет; 
раа41т5: 1ет; 


У меня замечательные 
скругленные углы внутри, 


разве я не прекрасен? 





Рис. 2.15. Контейнер 
с контуром и скруглением 
только изнутри 
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Я грустный элемент, 
потому что мой контур 


не повторяет мои 
скругленные углы :-( 





Рис. 2.16. Использование 
свойства оц 11пе на 
скругленном элементе 


Я счастливый элемент, 
потому что мой фальшивый 
контур повторяет мои 
скругленные углы :-) 





Рис. 2.17. Использование 
свойства бох -ѕһайом без 
смещения и размытия на 
элементе со скругленными 
углами 


Я замечательный 
внутренний контур, 


разве я не прекрасен? 





Рис. 2.18. Здесь контур 
подсвечен черным цветом, 
а тень — пурпурным; 

это помогает понять, что 


происходит с этим элементом. 


Обратите внимание, что 
контур рисуется поверх тени 


Это прекрасно работает, но нам приходится исполь- 
зовать два элемента, тогда как в действительности 
требуется только один. Можно ли достичь того же 
эффекта с одним элементом? 


Решение 


Предыдущее решение более гибкое — оно позволяет 
пользоваться всеми преимуществами фонов. На- 
пример, если мы хотим, чтобы наша «рамка» была 
закрашена не простым однородным цветом, а обла- 
дала какой-то текстурой, добиться этого довольно 
просто. Однако если мы имеем дело исключительно 
со старыми добрыми сплошными цветами, то нам 
хватит и одного элемента (хотя это и грязный спо- 
соб). Взгляните на следующий фрагмент С$$5-кода: 


раскегоипа: ап; 
рогдег-гаӣіиѕ: .8ет; 
райдіпе: 1еп; 

рох-ѕһайом: 9 0 Ө „бет #655; 
оиЁ1іпе: .бет $0114 #655; 


Можете угадать, каким будет визуальный резуль- 
тат? Данный код порождает эффект, показанный на 
рис. 2.15. По сути, мы воспользовались тем фактом, 
что контуры не повторяют скругление углов эле- 
мента (и, следовательно, обладают прямыми угла- 
ми, как показано на рис. 2.16), а тени (бох-ѕһайои), 
наоборот, скругляются (рис. 2.17). Следовательно, 
если мы наложим их друг на друга, то брох-ѕһайом за- 
кроет «дыры», которые контур оставляет по углам 
(рис. 2.18), и комбинация этих свойств даст нам не- 


обходимый эффект. На рис. 2.18 тень и контуры подсвечены разными цветами 
в качестве визуального пояснения. 


Обратите внимание, что в действительности Бох -ѕһайом не требуется размазы- 
вать на величину контура — хватит размазывания, достаточного для заполнения 
этих «дырок». В действительности, если размазывание будет равно ширине 
контура, то в некоторых браузерах это может привести к появлению визуальных 
артефактов, поэтому я рекомендую использовать значение чуть меньше. Это 
сразу вызывает вопрос: какова минимальная величина размазывания, которую 
необходимо указать, чтобы закрыть «дыры»? 
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Для того чтобы ответить на этот вопрос, необходи- 
мо вспомнить теорему Пифагора, которую мы все 
изучали в школе и которая позволяет вычислять 
длины сторон прямоугольных треугольников. Со- 
гласно теореме, длина гипотенузы (самой длинной, 
диагональной стороны треугольника) равна ./а2 +2, 
где аи Б — длины катетов. Если катеты равны по 


величине, то формула превращается в ү2а° =а\/2. 


Возможно, вы задаетесь вопросом, какое отношение 
геометрия уровня средней школы имеет к эффекту 
скругления внутреннего угла. Взгляните на рис. 2.19: 
эта схема дает визуальную подсказку относительно 
того, как вычислить минимальную ширину размазы- 
вания. В нашем случае значение богаег-гадіиѕ равно 
„Зет, следовательно, минимальное размазывание 


равно 8(/2-1) =.33137085ет. Все, что нам остает- 
ся, — слегка округлить это значение вверх и ука- 
зать радиус размазывания .34ет. Чтобы избежать 
необходимости проводить подобные вычисления 
каждый раз, когда вам требуется данный эффект, 
можно попросту использовать половину радиуса 
угла, что гарантированно даст достаточно большое 


значение, так как М1 0,5. 
Обратите внимание также, что данные вычисления 
обнаруживают еще одно ограничение этого метода: 


для того чтобы наш эффект сработал, радиус разма- 
зывания должен быть меньше ширины контура, но 


больше (32-1), где ~ — это значение Богдег-га@1и5. 
Это означает, что если ширина контура меньше 


(2-1), то применить данный эффект невозможно. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеіѕ.іо/іппег-гоипаіпд 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 


Почему этот способ 
® грязный? Потому что 

он полагается на 
тот факт, что контуры не 
повторяют скругление 
углов, однако нет никакой 
гарантии, что это поведение 
не изменится. В настоящее 
время спецификация дает 
разработчикам браузеров 
право самостоятельно прини- 
мать решения относительно 
того, как должны рисоваться 
контуры, но в будущем пла- 
нируется выпустить явную 
рекомендацию следовать 
скруглению — данное ре- 
шение уже принято рабо- 
чей группой С$$. Когда же 
оно будет фактически реали- 
зовано в браузерах, пока что 
остается загадкой. 





Рис. 2.19. Если радиус 


рамки равен г, то длина от 
центра окружности Богаег- 
гаати$ до угла контурного 
прямоугольника равна /\/2 , 
что означает, что минимально 
возможное размазывание 


равно ^\/2 – г = (5/21) 


С55 Васкагоцпаѕ & Вогаегѕ: ћҺір://\3.ого/ТВ/с55-раскдгоипаѕ 


С55 Ваѕіс Оѕег Іпќегѓасе: Һ&р://\3.огд/ТК/с553-иі 


= Фон в полоску 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Знание линейных градиентов С55, свойства баскегоипӣ- ѕіғе 


Проблема 


Полоски всех размеров, цветов и углов так же, если не больше, распространены 
в веб-дизайне, как и в любых других видах визуального дизайна, от журналов 
до обоев. Однако процесс реализации такого дизайна далек от идеала. Обычно 
мы создаем отдельное растровое изображение и каждый раз, когда возникает 
необходимость внести изменения, прибегаем к помощи графического редак- 
тора. Некоторые вместо этого используют файлы $УС, но это особый формат, 
синтаксис которого далек от дружественного. Правда, было бы здорово, если 
бы мы могли создавать полоски прямо в С$5? Вас это может удивить, но это 
возможно! 


Решение 


Предположим, что у нас есть простейший вертикальный линейный градиент, 
от #163 до #58а (рис. 2.20): 


БасКёгоипа: Ііпеаг-ргадіеп (#463, #58а); 


Теперь попробуем немного приблизить друг к другу границы перехода цвета 
(рис. 2.21): 


раскегоипа: 11пеаг-вгад1еп*(#+63 20%, #58а 80%); 


Теперь верхние 20% нашего контейнера заполнены 
сплошным цветом #3, а нижние 20% — сплошным 
цветом #58а. Настоящий градиент занимает толь- 
ко 60% высоты контейнера. Если мы еще сильнее 
сдвинем границы перехода цвета (40% и 60% со- 
ответственно, как показано на рис. 2.22), то высота 
градиента станет еще меньше. Возникает вопрос: 
а что произойдет, если границы перехода цвета 
встретятся на одном уровне? 


БасКёгоипа: 11пеаг-вгад1еп*(#+63 50%, #58а 50%); 


Если в одной и той же позиции определено несколько 
границ перехода цвета, то они образуют бесконечно 
малый переход от цвета, указанного в правиле первым, 
к цвету, указанному последним. Фактически в этой по- 
зиции вместо гладкого перетекания происходит просто 
резкая смена ивета. 


С55 Ітаде Маіиеѕ Геме 3 
(НЕр://м/З.ога/ТВ/с$$3-!тадез) 


Как вы видите на рис. 2.23, никакого градиента 
больше нет, только два участка сплошного цвета, 
каждый из которых занимает по половине нашего 
баскегоипа-ітаре. По сути, мы создали две большие 
горизонтальные полосы. 


Так как градиенты — это всего лишь сгенериро- 
ванные фоновые изображения, то с ними можно 
обходиться так же, как с любыми другими фоно- 
выми изображениями, например, корректировать 
их размер с помощью баскргоипӣ-ѕіге: 


Баскёгоипа: 11пеаг-вгад1еп{(#+63 50%, #58а 50%); 
БасКёгоипа-$17е: 100% 3ЗӨрх; 


Как видно на рис. 2.24, мы уменьшили высоту на- 
ших двух полосок до 15рх каждая. Так как наш фон 
повторяется, теперь весь контейнер заполнен гори- 
зонтальными полосами (рис. 2.25). 
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Рис. 2.20. Наша отправная 


точка 





Рис. 2.21. Теперь градиент 
занимает 60% общей высоты 
элемента, а оставшаяся часть 
заполнена сплошными 
цветами; границы перехода 
цвета показаны пунктирными 


ЛИНИЯМИ 





Рис. 2.22. Теперь градиент 
занимает только 20% общей 
высоты элемента, 

а оставшиеся части заполнены 
сплошными цветами; границы 
перехода цвета показаны 


пунктирными линиями 





Рис. 2.23. Обе границы пере- 
хода цвета сейчас находятся 


на отметке 50% 
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Рис. 2.24. Наш сгенериро- 
ванный фон без повторе- 


&2 


= 
© 
Е] 





Рис. 2.25. Горизонтальные 
ПОЛОСЫ — итоговый 


результат 





Рис. 2.26. Полосы неравной 


ширины 





Рис. 2.27. Полосы трех 


цветов 


Схожим образом можно создавать полосы неравной 
ширины, просто корректируя позиции границ пере- 
хода цвета (рис. 2.26): 


Баскёгоипа: 11пеаг-вгад1еп* (#463 30%, #58а 30%); 
БасКёгоипа-$12е: 100% ЗӨрх; 


Для того чтобы избежать необходимости корректи- 
ровать два значения каждый раз, когда нам нужно 
изменить ширину полосок, воспользуемся преиму- 
ществом, которое дает нам спецификация: 


Если для границы перехода цвета задана позиция, меньшая 
чем позиция любой другой границы перехода цвета перед 
ней в списке, то следует установить ее позицию равной 
наибольшей позиции среди всех предшествующих границ 
перехода цвета. 


С55 Ітадеѕ еме З (Һр://%3.огд/Т8/с553-ітадеѕ) 


Это означает, что если для второго цвета мы зададим 
позицию на уровне ө, то браузер скорректирует ее, 
увеличив до позиции предыдущей границы перехода 
цвета, — как раз то, что нам требуется. Следователь- 
но, следующий фрагмент кода создает точно такой 
же градиент, который мы уже видели на рис. 2.26, 
и при этом лучше соответствует принципам ОКУ: 


раскегоипа: 1Ііпеаг-ргадіепї (##63 30%, #58а 0); 
раскегоипа-ѕіғе: 100% ЗӨрх; 


Создавать полоски с большим количеством цветов 
ничуть не сложнее. Например, следующий фрагмент 
кода определяет горизонтальные полосы трех раз- 
ных цветов (рис. 2.27): 


Баскёгоипа: 1іпеаг-ргадіепі (##63 33.3%, 
#58а 0, #58а 66.6%, уе11омргееп 90); 
раскегоипа-ѕіғе: 100% 45рх; 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесге!ѕ.іо/һогігопќёаі-ѕгіреѕ 
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Вертикальные полосы 


Горизонтальные полосы реализовать проще всего, 
но на веб-сайтах, которые нам попадаются в Сети, 
встречаются фоны не только с горизонтальными 
полосами. Не менее распространены вертикальные 
полосы (рис. 2.28), а самые популярные и визуально 
интересные — это, вероятно, разные варианты диаго- 
нальных полос. К счастью, градиенты С55 помогают 
справиться и с этими задачами, предлагая решения 
разной степени сложности. 





Код, создающий вертикальные полосы, очень похож 
на предыдущий. Главное отличие — дополнительный 
первый аргумент, указывающий направление гради- 
ента. Мы могли бы указать его и при определении Рис. 2.28. Наши вертикаль- 
горизонтальных полос, но тогда нам было бы доста- Ные полосы. Вверху: заполне- 
П ние вертикальными полосами 
точно значения по умолчанию (+0 Боёќот). Помимо без повторения. Внизу: 
этого, в данном случае нам, очевидно, необходимо повторяющиеся полосы 


указать другие значения баскргоипа- ѕіге: 





БасКёгоипа: 1іпеаг-ргадіепі (ёо гіеһ&, /* или 9094ев */ 
#63 50%, #58а 0); 
раскегоипа-ѕіғе: З@рх 100%; 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/мегёісаІі-ѕёгіреѕ 


Диагональные полосы 


После горизонтальных и вертикальных полос кажется логичным попытаться 
создать диагональные полосы (с углом наклона 45°), еще раз изменив значение 
баскагоипа-ѕіғе и направление градиента, например, так: 


раскегоипа: 1іпеаг-ргадіепї (45ӣер, 
#63 50%, #58а 0); 
раскегоипӣ-ѕіғе: З@рх 3З@рх; 


Однако, как вы видите на рис. 2.29, этот способ не работает. Причина в том, что 
мы всего лишь повернули градиент внутри каждой плитки на 45°, а не опреде- 
лили повторяющуюся фоновую картинку. Вспомните растровые изображения, 
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Рис. 2.29. Наша первая 
провальная попытка создать 
диагональные полосы 





Рис. 2.30. Такие 
изображения стыкуются 
бесшовно, создавая 
аккуратные диагональные 
полосы; не кажется ли вам 
этот рисунок знакомым? 





Рис. 2.31. Наши полосы 
под углом 45°; пунктирными 
линиями обозначена 
повторяющаяся плитка 
рисунка 


которые мы обычно используем для создания диа- 
гональных полос, такие как показанные на рис. 2.30. 
Они включают четыре полосы, а не две, поэтому 
стыки между плитками совершенно не заметны. 
Именно такой рисунок нам необходимо создать 
с помощью С$5-кода, поэтому добавим еще парочку 
границ перехода цвета: 


БасКёгоипа: 1іпеаг-ргадіепї (45ӣер, 
#ҒЫЗ 25%, #58а 0, #58а 50%, 
#ҒЫЗ Ө, #ҒЫ3 75%, #58а Ө); 

БасКёгоипа-$12е: Здрх Зерх; 


Результат показан на рис. 2.31. Как вы видите, нам 
удалось создать диагональные полосы, но они кажут- 
ся тоньше, чем горизонтальные и вертикальные из 
предыдущих примеров. Для того чтобы понять, по- 
чему так произошло, нам необходимо снова вспом- 
нить теорему Пифагора из школьного курса, которая 
позволяет вычислять длины сторон прямоугольных 
треугольников. Согласно теореме, длина гипотенузы 
(самой длинной, диагональной стороны треугольни- 


ка) равна уа? +0? , где а и — длины катетов. Для 
равностороннего прямоугольного треугольника 


с углами 45° формула принимает вид \2а? =а4р. 
В случае с нашими диагональными полосами размер 
фона определяет длину гипотенузы, но ширина по- 
лосы в действительности равна длине катета. Схема, 
объясняющая эти расчеты, показана на рис. 2.32. 


Это означает, что для того, чтобы получить полосы 
шириной 15рх, как в предыдущих примерах, в ка- 
честве размера фона необходимо указать значение 
2х15\/2 = 42,426406871 пиксела: 


браскегоипа: 1іпеаг-ргадіепї (45ӣер, 

#ҒЫЗ 25%, #58а 0, #58а 50%, 

#ҒЫЗ Ө, #ҒЫ3 75%, #58а Ө); 
БасКёгоипа-$12е: 42.426406871рх 42.426406871рх; 


Конечный результат показан на рис. 2.33. Но если 
только на вас не наставили дуло пистолета и не за- 
ставляют под страхом смерти создавать диагональ- 
ные полосы шириной ровно 15 пикселов (кстати, 


гибель все равно неизбежна, потому что 4/2 — нера- 
циональное число, так что даже указанное нами зна- 
чение приблизительное, хотя и с высокой степенью 
точности), я настоятельно рекомендую округлять 
это тяжеловесное число до чего-нибудь вроде 42.4рх 
или даже 42рх. 


ПОПРОБУЙТЕ САМИ! 


Бр: //р1ау.с$55есге(5.10/Фадопа!-$тре$ 


Еще лучшие диагональные полосы 


Метод, продемонстрированный в предыдущем раз- 
деле, не обеспечивает особой гибкости. А что, если 
мы захотим создать полосы под углом 60°, а не 45°? 
Или 30°? Или 3,1415926535°? Если мы попытаемся 
изменить угол градиента, результат будет просто 
ужасным (на рис. 2.34 показана неудачная попытка 
нарисовать полосы под углом 60°). 


К счастью, существует гораздо лучший способ рисо- 
вания диагональных полос. Этот факт не слишком 
известен, но Ііпеаг-ргадіепї() и гадіа1-вгайіеп+() 
также предлагают версии с повторением: переаїіпв- 
Ііпеаг-вгадіепі() и гереа*1п8-га91а1-вгад1еп*(). 
Они работают совершенно так же, с одним только 
отличием: границы перехода цвета повторяются 
бесконечно, пока не заполнят все изображение. Так, 
например, следующий повторяющийся градиент 
(показанный на рис. 2.35): 


БасКёгоипа: гереаёіпе -1іпеаг-ргааіепі (454ев, 
#63, #58а ЗӨрх); 


эквивалентен этому простому линейному градиенту: 


раскегоипа: 1іпеаг-ргадіепї (45ӣер, 
#ҒЫЗ, #58а ЗӨрх, 
#ҒЫЗ ЗӨрх, #58а бӨрх, 
#ҒЫЗ бӨрх, #58а 90рх, 
#ҒЫЗ 9@рх, #58а 120рх, 
#263 120рх, #58а 150рх, ...); 
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|+ 15рх— 
Рис. 2.32. Фон размером 
З@рх обеспечивает полосы 


шириной 15 =10,606601718 
пиксела 2 





Рис. 2.33. Готовые полосы 
под наклоном 45°; обратите 
внимание, что ширина полос 
такая же, как в предыдущих 
примерах 





Рис. 2.34. Наша неудачная 
наивная попытка создания 
полос под углом 60° 





Рис. 2.35. Повторяющийся 
линейный градиент 


70 Глава 2 • Фон и рамки 


Повторяющиеся линейные градиенты идеальны для — вы уже догадались — по- 
лос! Благодаря их повторяющейся природе мы можем создавать цельные фоны 
из сгенерированных градиентных изображений. Это означает, что нам больше 
не нужно беспокоиться о рисовании бесшовно стыкующихся плиток, которые 
затем нужно уложить для формирования фона элемента. 


Для сравнения: фоновое изображение на рис. 2.33 можно было бы создать с по- 
мощью такого повторяющегося градиента: 


БасКёгоипа: гереаёіпе-1іпеаг-ргааіепї (45аер, 
#ЫЗ, #63 15рх, #58а Ө, #58а ЗӨрх); 


Первое очевидное преимущество — уменьшение количества повторений: для 
того чтобы изменить любой из цветов, нам нужно внести только две правки 
вместо трех. Также обратите внимание, что теперь размеры определяются 
в терминах границ перехода цвета градиента, а не БасКвгоипа-$12е. Размер 
фона используется первоначальный; для градиента это размер элемента. Это 
означает, что длины также становятся более понятными, так как измеряются 
они по градиентной линии, которая перпендикулярна нашим полосам. Больше 
никаких неуклюжих вычислений с \/2 | 


Однако самое больше преимущество состоит в том, что теперь мы можем за- 
дать абсолютно любой угол, и градиент будет работать — не нужно больше 
размышлять над проработкой плиток с бесшовным соединением. Например, 
вот как определяются полосы под углом 60° (рис. 2.36): 


БасКёгоипа: гереаёіпе-1іпеаг-ргааіепі (604е&, 
#63, #63 15рх, #58а Ө, #58а ЗӨрх); 


Потребовалось всего лишь изменить угол! Обратите 
внимание, что с этим методом нам требуются четыре 
границы перехода цвета для двух цветных полос, 
независимо от угла наклона полос. Это означает, что 
для создания горизонтальных и вертикальных полос 
лучше все же использовать первый метод, а к этому 
прибегать для определения диагональных полос. 
Если же мы имеем дело с полосами под углом 45°, 
то эти два метода можно даже объединить, по сути, 
воспользовавшись повторяющимися линейными градиентами для упрощения 
кода, который создает нашу повторяющуюся плитку: 





Рис. 2.36. Настоящие полосы 
под углом 60° 


БасКёгоипа: гереаёіпе -1іпеаг-ргааіепі (45аер, 
#ЫЗ 0, #ЕБЗ 25%, #58а 0, #58а 50%); 
БасКёгоипа-$517е: 42.426406871рх 42.426406871рх; 
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ПОПРОБУЙТЕ САМИ! 
ВЕр://р1ау.сх5есге5.ю/Фадопа!-$1ре$-604ед 


ПРОТЕСТИРУЙТЕ! 


ћр://рІау.сѕѕѕесгеѓѕ.іо/ёеѕё-соіог-ѕїор-2роѕійопѕ 


Гибкие нежные полосы 


Чаще всего нам требуется, чтобы полосы были не совершенно разных цветов, 
а представляли собой мягкие вариации яркости одного и того же цвета. Напри- 
мер, взгляните на такие полосы: 


Баскёгоипа: гереаёіпе-1іпеаг-егааіепї (304ез, 
#796, #796 15рх, #58а 0, #58а ЗӨрх); 


Как видно на рис. 2.37, мы создали чередующиеся полосы цвета #58а и одного из 
более светлых его вариантов. Однако взаимоотношение между этими цветами 
не очевидно, если просто прочитать код. Более того, если бы нам потребовалось 
изменить базовый цвет, то это повлекло бы за собой четыре (!) правки. 


БУДУЩЕЕ. 
ГРАНИЦЫ ПЕРЕХОДА ЦВЕТА С ДВУМЯ ПОЗИЦИЯМИ 


Скоро у нас появится возможность указывать две позиции для одной и той 
же границы перехода цвета — это одно из базовых запланированных до- 
полнений в С$$ Ттаде Уаше$ Іемеі 4 (Һір://%3.0г9/ТВ/с554-ітадеѕ). 
Это задумано как сокращение, позволяющее задать две последовательные 
границы перехода цвета с одним и тем же цветом, но разными позиция- 
ми — очень востребованная функциональность при создании градиентных 
узоров. Например, код для диагональных полос с рис. 2.36 выглядел бы так: 


Баскёгоипа: гереаёіпе-1іпеаг-ргааіепї (бёдер, 


#ҒЫЗ Ө 15рх, #58а @ з@рх); 


Это не только намного более емкий код, но и намного более соответствую- 
щий принципам ОВУ: цвета больше не дублируются, поэтому для изменения 
цвета достаточно одной правки. К сожалению, на момент написания этой 
главы данная функциональность не поддерживается ни одним браузером. 
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К счастью, существует лучший способ: вместо того чтобы задавать собственный 
цвет для каждой полосы, мы можем сделать наш самый темный цвет цветом 
фона, который будет просвечивать сквозь полосы полупрозрачного белого цвета: 


раскегоипа: #58а; 


Баскёгоипа-1таёе: гереа+іпе-1іпеаг-ргайіепі (304ез, 
ћ51а(0,0%,100%,.1), 
ћ51а(0,0%,100%,.1) 15рх, 
{гапзрагеп{ 0, ©гапѕрагепё ЗӨрх); 





Рис. 2.37. Полосы с нежными 
вариациями яркости 


Результат выглядит точно так же, как на рис. 2.37, 
но теперь для изменения цвета нам требуется внести 
правку только в одном месте. Также мы получаем 
дополнительное преимущество в том смысле, что 
наш базовый цвет будет служить резервным цветом 
в браузерах, не поддерживающих градиенты С$$. 
Помимо этого, как мы узнаем из следующего се- 
крета, накладывая друг на друга градиентные узоры 
с полупрозрачными областями, можно создавать 
очень сложные рисунки. 


ПОПРОБУЙТЕ САМИ! 
НЕр://р!ау.сз55есге5.ю/зибМе-$Етрез$ 





6 Сложные фоновые узоры 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, секрет «Фон в полоску» 


Проблема 


В предыдущем разделе мы узнали, как с помощью градиентов С55 создавать 
всевозможные полосы. Однако полосами фоновые узоры, да и любые другие 
геометрические рисунки, не ограничиваются. Часто у нас возникает необходи- 
мость создавать другие типы узоров: сетки, узор в горошек, шахматный узор 
и многие другие. 


К счастью, градиенты С55 могут помочь и со многими из этих задач. С помо- 
щью градиентов С$$ можно создать почти любой геометрический узор, хотя 
это и не всегда практично: если мы не будем соблюдать осторожность, то на 
руках у нас окажется безумный объем не поддающегося сопровождению кода. 
Создание узоров средствами С55 — это также одна из ситуаций, когда использо- 
вание препроцессора С$$, например $8аѕѕ (НЕр://заз$-!апд.сот), оправданно. Это 
позволяет сократить количество повторений, так как чем сложнее становятся 
узоры, тем менее соответствует принципам ОКУ описывающий их С55-код. 


В этом секрете мы сосредоточимся на создании самых простых и наиболее 
востребованных узоров. 
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— == С553 РаНегиз СаПегу 


Сма ве рол сори + Лев в офом + Возия парри > ый а поч зо з САВ ро з бору 





Рис. 2.38. Моя галерея узоров, сделанных с помощью С$53 (вы можете найти ее по адресу 
ВЕр:/Леа.мегои.те/с$5ЗраКегп$), показывает, какие возможности обеспечивали градиенты С55 
еще в 2011 году. В 2011-2012 годах на эту страницу ссылались почти в каждой статье и книге, 
в которых заходила речь о градиентах С55, а также упоминали в выступлениях на множестве 
тематических конференций. Несколько производителей браузеров использовали ее для тонкой 
регулировки своих реализаций градиентов С$$. Однако далеко не все показанные узоры уместно 
использовать на реальных веб-сайтах. Некоторые из них приведены только для того, чтобы 
продемонстрировать возможности С55, а код, необходимый для их создания, чрезвычайно 
объемен и полон повторений. Для подобных ситуаций намного лучше подходит формат 5\С. 
Несколько примеров $\С-узоров вы найдете на Һёр://рһ!Ыі.сот/ѕудраќегпѕ; этот веб-сайт был 
создан в качестве ответа галерее узоров С55 
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Сетки 


Используя только один градиент, можно создать не так уж много узоров. Вол- 
шебство начинается, когда вы сочетаете несколько градиентов, просвечива- 
ющих сквозь друг друга благодаря наличию прозрачных областей. Вероятно, 
самый простой из подобных узоров — это наложение горизонтальных и вер- 
тикальных полос для создания различных типов сеток. Например, следующий 
фрагмент кода создает узор, напоминающий расцветку хлопчатобумажной 
скатерти (рис. 2.39): 


Баскёгоипа: ий1*е; 
БасКёгоипа-1тазе: 1іпеаг-вгадіеп+ (90Яер, 
гвра(200,0,0,.5) 50%, +гапѕрагепі Ө), 
11пеаг-вгад1еп* ( 
гвра(200,0,0,.5) 50%, +гапѕрагепі Ө); 
раскегоипа-ѕіғе: З@рх 3З@рх; 


регулировать размер ячеек сетки, не меняя при 
этом ширину линий, например, для создания линий, 
служащих в качестве направляющих. Это прекрас- 
ный повод использовать абсолютные значения вме- 


В некоторых случаях мы хотим иметь возможность 
сто процентных в качестве границ перехода цвета: 


басквгоипа: #58а; 
БасКёгоипа-1табе: 
11пеаг-вгад1еп* (мһіе 1рх, +гапзрагеп{ Ө), 
Ііпеаг-вгайіепі (9@ӣӢер, мһіёе 1рх, 
{гапзрагеп{ 09); 
раскегоипа-ѕіғе: З@рх 3З@рх; 


Результат (показанный на рис. 2.40) представляет 
собой сетку из белых линий шириной 1рх, где шири- 
на ячейки равна зөрх. Так же как в секрете «Гибкие 
нежные полосы», базовый цвет служит резервным 
вариантом для случаев, когда браузер не поддержи- 
вает градиенты С55. 





Эта сетка — отличный пример узора, который может рис. 2.39. Наш узор для ска- 
быть создан с помощью достаточно хорошо под- терти, а также два градиента, 
дающегося сопровождению С$5-кода (хотя и не из которых он состоит (здесь 


полностью соответствующего принципам ОКУ):  ПРозрачные области обо- . 
значены традиционнои серои 


О если нам понадобится поменять размер ячейки, шахматной клеткой) 
толщину линий или любой из цветов, догадаться, 
какое значение требуется для этого отредактиро- 
вать, будет довольно просто; 
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Рис. 2.40. Простейшая 

сетка для паттерна С55, 
толщина линий на которой 
всегда остается равной 1рх, 
независимо от размера ячейки 


раскегоипа: #58а; 
раскегоипа-ітаре: 


• Фон и рамки 


О для внесения подобных изменений не приходится 
делать огромное количество правок; нужно ис- 
править лишь одно или два значения; 


О код ктому же относительно короткий, всего лишь 
четыре строки объемом 170 байт. ЗУС-код не мог 
бы быть короче. 


Мы можем также наложить друг на друга две сетки 
С ЛИНИЯМИ разной толщины и разными цветами, для 
того чтобы создать более реалистичный вариант 
светокопировального листа (рис. 2.41): 


Ііпеаг-вгааіепі (мһіёе 2рх, &гапѕрагепё Ө), 
Ііпеаг-вгааіепї (904её, мН1е 2рх, +гапѕрагепё ё), 
11пеаг-вгад1еп* (ћѕ1а(0,0%,100%,.3) 1рх, 


+гапѕрагепё 9), 


11пеаг-вгад1еп* (9@дӢер, һѕ1а(0,0%, 100%, .3) 1рх, 


{гапзрагеп* 9); 


раскегоипа-ѕіғе: 75рх 75рх, 75рх 75рх, 
15рх 15рх, 15рх 15рх; 


СОВЕТ 


Для вычисления размера 
файла, содержащего код 
для вашего узора С55, вос- 
пользуйтесь помощью НЁр:// 
Буѓеѕігетаќегѕ.сот — про- 
сто вставьте код в текстовое 
поле. 


Рис. 2.41. Более сложная 
сетка для паттерна С55, 
состоящая из двух сеток 
с разными параметрами 






ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесге(ѕ.іо/Ы̇иергғіпё 


Узор в горошек 


Пока что для создания узоров мы использовали 
только линейные градиенты. Однако радиальные 
градиенты тоже могут быть чрезвычайно полезными, 
так как они позволяют создавать окружности, эллип- 
сы и фрагменты этих фигур. Самый простой узор, 
который можно создать с помощью радиального 
градиента, — это массив точек (рис. 2.42): 


Баскёгоипа: #655; 
БасКёгоипа-1табе: 
{гапзрагеп* Ө); 

БасКёгоипа-$12е: Здрх Зерх; 


гадіа1-вгадіепі (Фап 30%, 


6. Сложные фоновые узоры 77 


Следует признать, что сам по себе этот рисунок не 
слишком пригоден для использования. Однако МЫ 
можем объединить два таких градиента и определить 
для них разные позиции фона, создав таким образом 
узор в горошек (рис. 2.43): 


Баскёгоипа: #655; 


раскегоипа-ітаре: га1а1-вга@1еп*(%ап 30%, 


+ғгапѕрагепё 09), 

гааіа1-егааіепі(&ап 30%, 

{гапзрагеп{ 09); 
раскегоипа-ѕіғе: З@рх 3З@рх; 
баскегоипа-роѕіїіоп: 0 0, 15рх 15рх; 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесгеїѕ.іо/роіка 


Обратите внимание: чтобы этот эффект сработал, 
вторая позиция фона должна составлять половину 
размера плитки. К сожалению, это означает, что для 
того, чтобы изменить размер плитки, нам нужно 
внести четыре правки. Это на грани того, чтобы 
назвать такой код непригодным к сопровождению, 
хотя общего мнения относительно того, перейдена 
ли черта, нет. Если вы используете препроцессор, 
то можете преобразовать это в примесь: 


5С55 

@тіхіп ро1Ка($$12е, $4о%, $Базе, $ассепі) { 
Баскёгоипа: $Базе; 
БасКёгоипа-1табе: 





Рис. 2.42. Массив точек; 
повторяющаяся плитка 
обозначена пунктирной 
линией 





Рис. 2.43. Узор в горошек; 
обе повторяющиеся плитки 
обозначены пунктирными 
ЛИНИЯМИ 


гайіа1-ргайіепї ($ассепі $аої, Егапзрагепе @), 
гаа1а1 -вгаа1еп* (ФассепЕ $аої, Егапзрагепе Ө); 


Баскёгоипа-$12е: $$12е $$12е; 
Ббаскегоипа-роѕіїіоп: 0 0, $$12е/2 $5іғе/2; 


Затем для создания узора в горошек понадобится вызов, подобный этому: 


5С55 
@іпс1иае ро1Ка(З@рх, 30%, #655, +ап); 
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Шахматные доски 


Рис. 2.44. Узор с серой 
шахматной доской для обо- 
значения прозрачности; если 
бы мы создавали его путем 
повторения изображения, то 
для этого нам потребовалась 
бы плитка, обозначенная пун- 
ктирной линией 


Рис. 2.45. Повторяющаяся 
плитка, на которой квадратик 
окружен пустым простран- 
ством; плитка обозначена 
пунктирной линией 


• Фон и рамки 


Узоры типа «шахматная доска» используются 
во множестве ситуаций. Например, шахматная 
доска нежной расцветки может быть интересной 
альтернативой пресному фону сплошного цвета. 
Помимо этого, серая шахматная доска стала де 
факто стандартом обозначения прозрачности, что 
находит применение в самых разных пользова- 
тельских интерфейсах. Сделать шахматную доску 
с помощью С$5 значительно сложнее, чем можно 
было бы ожидать. 


Типичная плитка, повторение которой генерирует 
шахматную доску, включает по два квадратика 
каждого цвета, как показано на рис. 2.44. Кажется, 
что этот эффект должно быть несложно воссоздать 
с помощью С55: нужно всего лишь определить 
два квадрата с разными позициями фона, не так 
ли? Не совсем. Да, технически возможно создать 
квадраты, используя градиенты С$$, но без пу- 
стого пространства вокруг них результат будет 
выглядеть как заливка сплошным цветом. Од- 
нако не существует способа создавать квадраты, 
окруженные пустым пространством, используя 
только один градиент С55. Если вы считаете, что 
это не так, попытайтесь найти градиент, который 
при повторении будет создавать изображение, по- 
казанное на рис. 2.45. 


Хитрость состоит в том, чтобы делать квадратик 
из двух прямоугольных треугольников. Мы уже 
умеем создавать прямоугольные треугольники (см. 
нашу неудачную попытку создать диагональные 
полосы на рис. 2.29). Вы можете освежить память, 
взглянув на следующий фрагмент кода (здесь ис- 
пользуются другие цвета и прозрачность): 


раскегоипа: #еее; 
Баскргоипа-ітаре: 
11пеаг-вгад1еп*(454ев, #6ЫЫ 50%, 
{гапзрагеп* 6); 
раскегоипа-ѕіғе: З@рх 3З@рх; 
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Возможно, вы задаетесь вопросом, чем это может 

вам помочь. Определенно, если попытаться сделать 

квадратики из двух треугольников, подобных пока- 

занным на рис. 2.29, результатом станет сплошной 

цвет. А что, если вполовину уменьшить катеты этих 

треугольников, чтобы они занимали 1/8 плитки, 

а не 1/2, как сейчас? Этого можно с легкостью рис, 2.46. Прямоугольные 
добиться, указав в качестве позиции границы треугольники с большим 
перехода цвета 25% вместо 50%. Результат будет  Количеством пустого 
выглядеть как на рис. 2.46. а 


Схожим образом можно создать треугольники, ука- 
зывающие в противоположном направлении, зер- 
кально отразив границы перехода цвета (рис. 2.47): 


раскегоипа: #еее; 
Баскргоипа-ітаре: 
]11пеаг-вгад1еп*(454ев, +гапзрагеп{ 75%, 
НЬБЬ ө); 

Баскёгоипа-$17е: З@рх 3З0рх; 
Рис. 2.47. Если зеркально 
отразить границы перехода 

Угадаете, что произойдет, если мы объединим эти цвета, то мы получим 

два решения? Код будет выглядеть так: треугольники, указывающие 
в противоположном 


басквгоипа: #еее; направлении 


Баскргоипа-ітаре: 
11пеаг-вгад1еп* (454ев, #666 25%, 
{гапзрагеп{ 9), 
11пеаг-вгад1еп*(454ев, +гапзрагеп{ 75%, 
НЬБЬ ө); 
Баскёгоипа-$17е: З@рх 3З0рх; 


На первый взгляд кажется, что результат, показан- 

ный на рис. 2.48, не способен привести нас к же- 

лаемой цели. Однако нужно всего лишь сдвинуть рус, 2.48. Объединение двух 
второй градиент на половину размера плитки, для треугольников 

того чтобы объединить эти треугольники и полу- 

чить квадрат: 


БасК=гоипа: #еее; 
Баскргоипа-ітаре: 
11пеаг-вгад1еп* (454ев, #666 25%, +гапѕрагепі Ө), 
11пеаг-вгад1еп* (454ев, +гапѕрагеп 75%, 566 Ө); 
Басквргоипа-роѕіїіоп: 9 0, 15рх 15рх; 
Баскёгоипа-$17е: З@рх зерх; 
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БУДУЩЕЕ. 
КОНИЧЕСКИЕ ГРАДИЕНТЫ 


В будущем для создания шахматных досок нам 

не придется полагаться исключительно на по- 

мощь треугольников, педантично накладыва- 

емых друг на друга. С55 Ітаде Маше 1еме! 4 

(ВЕ р://м/З.огд/ТВ/с$$4-птадез) определяет но- 

вый набор функций градиента, позволяющих 

создавать конические градиенты (также извест- 

ные как «угловые градиенты»). Эти градиенты 

часто выглядят как конусы, если смотреть на 

них сверху, отсюда и название. Они генери- 

руются с помощью линии, которая крутится вокруг фиксированной точки, 
постепенно меняя цвет. Например, цветовое колесо, показанное здесь, 
можно будет создать с помощью следующего градиента: 


раскегоипӣа: сопіс-вгадіепё (геа, уе11ом, 11те, адиа, Б1ие, 
Ғисһѕіа, геа); 


Конические градиенты удобны для определения множества различных 
эффектов, не только для создания цветового колеса: звездные взрывы, 
эффект выглаженного щеткой металла и многие другие типы фонов, 
включая (как вы уже догадались) шахматные доски. Благодаря им повто- 
ряющуюся плитку с рис. 2.44 можно было бы создать с помощью всего 
лишь одного градиента: 


баскегоипа: гереа*1п8-соп1с-вгад1еп (#656 Ө, #66Ы 25%, #еее Ө, 
#еее 50%); 
Баскёгоипа-$12е: зӨрх З@рх; 


К сожалению, на момент написания этой главы конические градиенты не 
поддерживаются ни в одном браузере, но вы найдете полифилл на веб- 
странице ВЫр://Леауегои.дйПиБ.1о/согс-дгаФепе. 


ПРОТЕСТИРУЙТЕ! 


НЕр://р1ау.сз5есге5.10/ве${-соп!с-дгафептЕ 
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Догадаетесь, каким будет результат? Это как раз то, чего мы пытались добить- 
ся ранее, — см. рис. 2.49. Обратите внимание, что, по сути, это половинчатая 
шахматная доска. Все, что нам нужно для превращения ее в полноценную 
шахматную доску, — это повторить два градиента, создав еще один набор ква- 
дратиков, и еще раз сместить их позиции, как если бы мы дважды применяли 
технику создания узора в горошек: 


БасК=гоипа: #еее; 
БасКёгоипа-1табе: 
11пеаг-вгад1еп* (454ев, #666 25%, +гапѕрагепі Ө), 
11пеаг-вгад1еп* (454ев, +гапзрагеп 75%, 566 Ө), 
11пеаг-вгад1еп* (454ев, #666 25%, +гапѕрагепі Ө), 
11пеаг-вгад1еп* (454ев, +гапзрагеп 75%, Н56Ь Ө); 
баскегоипа-роѕітіоп: 0 0, 15рх 15рх, 
15рх 15рх, ЗӨрх 39рх; 
Баскёгоипа-$17е: З@рх 3З0рх; 


Результатом станет шахматная доска, идентичная 
показанной на рис. 2.44. Мы можем немного усовер- 
шенствовать код, объединив треугольники, указыва- І 
ющие в противоположные стороны (то есть первый 
со вторым, а третий с четвертым) и превратив более 
темный оттенок серого в полупрозрачный черный, 


ля того чтобы базовый цвет можно было всегда 
А " Ф Рис. 2.49. Теперь наши 


с легкостью поменять без необходимости соответ- 
ствующим образом корректировать цвет верхнего 
слоя: 


басквгоипа: #еее; 
Баскргоипа-ітаре: 
1іпеаг-вгайіепї (45ӣер, 
грба(0,0,0,.25) 25%, +гапѕрагеп+ Ө, 
{гапзрагеп{ 75%, гвБа(0,0,0,.25) Ө), 
11пеаг-вгад1еп* (45ӣер, 
грба(0,0,0,.25) 25%, +гапѕрагеп+ Ө, 
{гапзрагеп{ 75%, грра(0,0,0,.25) Ө); 
Баскргоипа-роѕіїіоп: 9 0, 15рх 15рх; 
Басквгоипа-ѕіғе: З@рх зерх; 


объединенные треугольники 
формируют квадратики, 
окруженные пустым 
пространством; две плитки 
обозначены пунктирными 
линиями, а для второго 
градиента используется чуть 
более темный оттенок 


Теперь у нас два градиента вместо четырех, но код, как и раньше, может служить 
иллюстрацией принципа ЕТ. Для того чтобы изменить акцентный цвет или 
размер ячейки, необходимо внести четыре правки. В данном случае уместно 
создать примесь в препроцессоре, чтобы исключить дублирование. Например, 
в 5а55 это выглядело бы так: 
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Рис. 2.50. Это сложный 
узор, и догадаться, как 
он работает, особенно 
после уменьшения 
количества градиентов 
до двух, не так-то легко. 
Чаще всего разобраться 

в хитросплетениях узора 
помогает присвоение 
случайного цвета одному 
из градиентов или одной 
из границ перехода цвета. 
Например, здесь первый 
градиент показан цветом 
геБессаригр1е вместо 
полупрозрачного черного, 
а две плитки обозначены 
пунктирными линиями 


ИЕТ расшифровывается 

как Ие Епјоу Туріпо («Нам 
нравится печатать»), и это 
противоположность принципу 
ОКУ (то есть МЕТ-код — это 
повторяющийся, не поддаю- 
щийся нормальному сопрово- 
ждению код). 


• Фон и рамки 


5С55 


@тіхіп спескКегБоага($$12е, $Базе, 
фассеп: грба(0,0,0,.25)) { 
Баскегоипа: $Баѕе; 
раскргоипа-ітаве: 
11 пеаг-вгад1еп* (45ӣер, 
$ассеп 25%, Егапзрагеп* Ө, 
{гапзрагепе 75%, $ассеп{ Ө), 
11 пеаг-вгад1еп* (454ев, 
фассепЁ 25%, Егапзрагеп* Ө, 
{гапзрагепе 75%, Фассеп{ Ө); 
Баскегоипа-роѕіїіоп: 0 0, $$12е $$12е, 
Баскегоипа-ѕіғе: 2*$$12е 2*%5іге; 


} 


/* Пример использования */ 
@іпс1иае спескегБоага(15рх, #58а, ап); 


В любом случае, кода получилось так много, что, воз- 
можно, было бы лучше пойти по пути ЗУС. Плитка 
для рис. 2.44 в формате $УС была бы очень простой 
и короткой: 


$\б 


<5\5 хт1п5="ВЕЕр: //ммм.м3 .ог8/2000/5\8" 
міаһ="100" һеіеһё="100" Ғ111-орасі+у=". 25" 


<гесЕ х="50" міаёһ="50" һеівһі="50" /> 
«гес у="50" міаһ="50" һҺеірһё="50" /> 
</$\5> 


Кто-то возразит: «Но градиенты С55 экономят нам 
НТТР-запросы!» Однако в современных браузерах 
мы можем встроить ЗУС-файл в таблицу стилей как 
ОКІ с данными, и нам даже почти не придется пре- 
образовывать его с помощью Базе64 или ОВГепсоде: 


БасКёгоипа: #еее иг] ( ' Дафа: ітаве/ у8+хт1 ‚ \ 
<5\у8 хт1п5=" Ир: //ммм.м3.0г5/2000/5\5" \ 
міаһ="100" һеіеһё="100" 
Ғ111-орасі+у=".25">›\ 
<гесе х="50" міаһ="50" һеірһё="50" /> \ 
<гесЕ у="50" міаєһ="50" һеірһі="50" /> \ 
</5%8>'); 

раскегоипа-ѕіғе: Здрх Зерх; 
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Рис. 2.51. Сочетание этих техник с режимами смешивания (ћір://%у3.ого/ТВ/сотроѕііпо-1), 
когда значения баскегоипа-Б1епа-тоде, отличные от погта1, используются для некоторых (или 
даже всех) слоев, составляющих фоновое изображение, может дать очень интересные 
результаты, что подтверждает эта галерея узоров Беннетта Фили (Һ&р://беппеќғееІіу.сот/ 
дгааіепёѕ). Для большинства из этих узоров используется только режим смешивания ти1+ір1у, 
но и другие значения, такие как оуег1ау, ѕсгееп и аіҒҒегепсе, также могут оказаться очень 


полезными 


84 Глава 2 • Фон и рамки 


СОВЕТ 


Обратите внимание, что одну 
строку С55-кода для удобства 
чтения можно разнести на не- 
сколько строк файла, добавив 
перед символом перевода 
строки обратный слеш (\). 


Версия в формате $УС не только на 40 символов 
короче, в ней также заметно меньше повторений. 
Например, для изменения цвета достаточно одной 
правки, а для изменения размера — двух. 


ПОПРОБУЙТЕ САМИ! 


НЕр://р1ау.сз5ъесге5 /о/спесКегБоага-$\9 





7 (Псевдо)случайные фоны 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, секрет «Фон в полоску», секрет «Сложные фоновые узоры» 


Проблема 


Повторяющиеся геометрические узоры смотрятся 
мило, но бывают немного скучными. Вряд ли где- 
то в природе можно встретить узор, состоящий из 
идентичных повторяющихся плиток. Даже когда 
рисунок повторяется, он все равно содержит массу 
вариаций и случайностей. Взгляните на цветочное 
поле: хотя оно достаточно однородно, чтобы казаться 
нам красивым, все равно там присутствует достаточ- 
но бессистемности, чтобы вызывать интерес. Не- 
возможно найти два абсолютно одинаковых цветка. 
Вот почему, когда мы пытаемся создавать фоновые 
узоры, выглядящие как можно более естественными, 
мы одновременно стараемся, чтобы «швов» между 
повторяющимися плитками было как можно мень- 
ше и они были как можно менее заметными, а это 
прямо противоречит нашему желанию сохранять 
небольшой размер файла. 





Рис. 2.52. Природа 
не повторяет себя 
в «бесшовных» плитках 
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Когда характерная черта — например, завиток в текстуре древесины — по- 
вторяется через равные интервалы, это сразу разрушает иллюзию природной 
случайности. 


Алекс Уолкер, Принцип цикады и почему это важно для веб-дизайнеров 
(Аех \МаКег, Тһе Ссада РипарЕ апа \\Пу 1 Маќегѕ їо Мер Резюпего) (Һр://ѕќероіпі. 
сот/&ће-сісааа-ргіпсіріе-апа-мһћу-#-таіќегѕ-ќо-уер-аеѕідпегѕ) 


Воспроизвести случайность — задача непростая, так как в С55 не предусмотрено 
никаких встроенных возможностей генерации случайных значений. Рассмотрим 
пример с полосами. Предположим, что мы хотим создать вертикальные поло- 
сы разных цветов и ширины (для простоты ограничимся четырьмя цветами) 
без каких-либо видимых «швов» между повторяющимися плитками. Первой 
мыслью может быть создание одного градиента со всеми четырьмя полосами, 
например, так: 


раскегоипа: 1іпеаг-ргадіепї (90ер, 

#ЕЫЗ 15%, #655 0, #655 40%, 

#аЫ4 @, #аб4 65%, һѕ1(20, 40%, 909%) Ө); 
раскегоипӣ-ѕіғе: 8@рх 100%; 


Рис. 2.53. Наша первая попытка создать псевдослучайные полосы, где все цвета генерируются 
одним и тем же линейным градиентом 


Как видно на рис. 2.53, повторения очевидны, так как шаблон воспроизводит- 
ся каждые 8Өрх (это значение Басквгоипа-$12е). Можно ли добиться чего-то 
лучшего? 


Решение 


Первая идея — создать иллюзию случайности, разбив плоскую полосатую 
плитку на два слоя: один базовый слой и три слоя полосок, повторяющихся 
с разными интервалами. Это легко реализовать, жестко закодировав ширину 
полос в границах перехода цвета и используя Басквгоипа-$12е для управления 
расстоянием между полосами. Код может выглядеть примерно так: 
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Баскёгоипа: һ51(20, 40%, 90%); 

раскегоипа-ітаре: 
Ііпеаг-вгайіепї (994ев, 
Ііпеаг-вгайіепі (994ев, 
Ііпеаг-вгадіепї (9@ӣер, 

раскегоипа-ѕіғе: 80рх 100%, бӨрх 100%, 40рх 1007; 


Так как повторение самой верхней плитки будет 
наиболее заметно (ведь ее ничто не заслоняет), на- 
верх следует поместить плитку с самым большим 
интервалом повторения (в нашем случае это оран- 
жевые полоски). 


Как демонстрирует рис. 2.54, теперь результат на- 
много более похож на случайный набор полосок, но 
если приглядеться, все же можно заметить, что одна 
ита же плитка повторяется каждые 240рх. Конец пер- 
вой повторяющейся плитки для такой композиции 
приходится на точку, до которой все наши отдель- 
ные фоновые изображения были воспроизведены 
целое число раз. Как вы помните из школьного 
курса математики, если у нас есть несколько чисел, 
то минимальное число, которое нацело делится на 
каждое из них, — это их наименьшее общее кратное 
(часто это название сокращают до аббревиатуры 


#ҒЫЗ 10рх, Егапзрагеп* Ө), 
#аб4 20рх, Егапзрагеп* Ө), 
#655 20рх, Егапзрагеп* Ө); 


Обратите внимание, что здесь 
слово «плитка» используется 
в абстрактном смысле: мы 
говорим не о повторяющемся 
изображении каждого от- 
дельного градиента, а о вос- 
принимаемой взглядом 
повторяющейся плитке, 
представляющей собой 
композицию градиентов 
(то есть если бы мы не ис- 
пользовали решение с не- 
СКОЛЬКИМИ фонами, то какого 
размера повторяющееся 
фоновое изображение по- 
требовалось бы нам для того, 
чтобы добиться того же ре- 
зультата?). 


НОК). Следовательно, здесь размер плитки — это наименьшее общее кратное 
размеров фона, то есть НОК для 40, 60 и 80, и это значение равно 240. 





Рис. 2.54. Наша вторая попытка, включающая наложение друг на друга разных градиентов 
с разным размером фона; (воспринимаемая взглядом) повторяющаяся плитка обозначена 


пунктирными линиями 


Отсюда логически вытекает, что для того, чтобы сделать узор еще более ви- 
зуально хаотичным, необходимо максимизировать размер повторяющейся 
ПЛИТКИ. Благодаря математике нам не приходится долго и тяжело размышлять, 
как же это сделать, так как ответ уже известен. Чтобы НОК был максимальным, 
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числа должны быть взаимно простыми. 1 В этом случае их НОК будет равно 
их произведению. Например, 3, 4 и 5 взаимно простые, поэтому их НОК равно 
Зх4х 5 = 60. Самый простой способ подобрать подходящие значения — вос- 
пользоваться простыми числами, так как они всегда взаимно просты с любыми 
другими числами. Списки простых чисел вплоть до очень больших значений 
легко можно найти на различных веб-сайтах в Сети. 


Рис. 2.55. Финальный вариант полосок, где для создания лучшего впечатления хаотичности 
используются простые числа 


Чтобы создать еще больший эффект случайности, для указания ширины по- 
лос можно также использовать простые числа. Вот как будет выглядеть новая 
версия кода: 


Баскёгоипа: һ51(20, 40%, 90%); 

раскегоипа-ітаре: 
Ііпеаг-вгадіепё (904ев, #ҒЫ3 11рх, ёгапѕрагеп+ Ө), 
Ііпеаг-вгадіепё (904ев, #ар4 23рх, ёгапѕрагепі Ө), 
11пеаг-вгад1еп* (9@дӢер, #655 41рх, Егапзрагеп* 0); 

раскегоипӣ-ѕіғе: 41рх 100%, 61рх 100%, 83рх 1007; 


Да, код не самый красивый, но попробуйте найти швы на рис. 2.55! Размер по- 
вторяющейся плитки теперь равен 41 х 61 х 83 = 207 583 пикселов — больше, 
чем любое разрешение экрана, какое только можно вообразить! 


Эту технику Алекс Уолкер, который впервые догадался использовать простые 
числа для создания впечатления случайно сгенерированного фона, назвал 
«Принципом цикады». Обратите внимание, что она может пригодиться не 
только для фонов, но и для любых других элементов, с которыми хорошо ра- 
ботают повторения. Варианты использования включают: 





' Простые числа — это целые числа, которые не делятся без остатка ни на какие другие 
числа, кроме 1 и самих себя. Например, первые 10 простых чисел — это 2, 3, 5, 7, 11, 13, 
17, 19, 23, 29. С другой стороны, «взаимно простые» относится к взаимосвязи между 
числами, то есть это не характеристика отдельного числа. У взаимно простых чисел нет 
общих делителей, но в целом делители у них присутствовать могут (например, 10 и 27 — 
взаимно простые, но ни одно из них простым не является). Разумеется, простое число 
будет взаимно простым с любым другим числом. 


7. (Псевдо)случайные фоны 89 


О небольшие псевдослучайные повороты изображений в фотогалерее с не- 
сколькими :пёһ-сһі1а(ап), где а — простое число; 





О создание анимации, в которой фрагменты не повторяются всегда одним 
и тем же образом. Используйте несколько анимированных изображений, 
длительность которых равна простым числам (пример вы найдете на Нёр:// 
ріау.сѕѕѕесгеїѕ.іо/сісапітайоп). 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесге(ѕ.іо/сісааа-ѕігіреѕ 


Спасибо Алексу Уолкеру за идею, послужившую вдохновением для этой 
техники. Подробное описание вы найдете на странице Ћ&р://ѕїќероіпё.соту/ 
ће-сісада-ргіпсіріе-апа-мһу-#-таќегѕ-іо-уер-аеѕідпегѕ. Эрик Мейер (Егіс 
Меуег) (һћір://теуегуер.сот) позднее придумал нечто под названием «Ци- 
кадиенты» (Сісааіепіѕ — Һ@р://теуегумеБ.сот/егіс/ёћоидһ5/2012/06/22/ 
сісааіепіѕ), подразумевающее применение этой техники к фоновым изо- 
бражениям, сгенерированным с помощью градиентов С55. Дадли Стори 
(Оиаіеу Ѕїогеу) также написал очень информативную статью об этой 
концепции: Һќїр://аетоѕіћепеѕ.іпѓо/Ыіод/840/Вгооа-Х-Міѕиа!ігіпд-Тһе- 
Сісааа-Ргіпсіріе-Іп-С55. 


Благодарности 


Сплошные рамки для изображений 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, базовые знания о Богдег-1таре, секрет «Фон в полоску», 
базовые знания об анимации С55 


Проблема 


Иногдау нас возникает необходимость использовать 
узор или изображение не в качестве фона, а в каче- 
стве рамки. Например, на рис. 2.57 вы видите элемент 
с декоративной рамкой, по сути, представляющей 
собой изображение, обрезанное так, чтобы от него 





Рис. 2.56. Изображение осталась только рамка. Кроме того, мы хотим, чтобы 
камня, с которым мы будем наше изображение могло масштабироваться, закры- 
работать в этом секрете вая всю площадь рамки, независимо от размеров эле- 


мента. Как создать нечто подобное с помощью С$$? 


Возможно, у вас в голове сейчас звучит громкий крик: «брогаег-ітаре, Богаег- 
1таре, мы можем использовать Богіег-ітаре, это больше не проблема!!!11» Нетак 
быстро, юный падаван. Вспомните, как на самом деле работает богдег-1таве: по 
сути, это масштабирование девяти фрагментов. Вы разрезаете изображение на 
девять блоков и применяете их к углам и сторонам соответственно. На рис. 2.58 
вы найдете визуальное напоминание того, как это работает. 


Как с помощью богаег-ітаве нарезать изображение, чтобы воспроизвести при- 
мер с рис. 2.57? Даже если мы потратим кучу времени и правильно разделим 
его для элемента конкретного размера с конкретной шириной рамки, оно не 
будет масштабироваться при изменении размера элемента. Проблема в том, 
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что мы не собираемся всегда использовать в углах 
лишь определенные части изображения; то, какой 
фрагмент изображения будет отображаться в углу, 
зависит от размера элемента и ширины рамки. По- 
пробуйте поэкспериментировать, и, скорее всего, вы 
поймете, что с Богдег-1таве это невозможно. Но что 227772 


же тогда делать? 














У меня замечательная 
рамка, разве я не прекрасен? 


У меня замечательная 


о о рамка, разве я не прекрасен? 
Самый простои способ — использовать два элемента 


НТМГ: один, для которого фоном будет служить 
наша картинка с камнем, и второй — с белым фоном 
для области содержимого элемента: 


Васоп ірѕит 4оюг атеї 
Ғаїраск аісаїга їепдепоіп 


сһіскеп ѕһапк, ѕаиѕаде 


ААА 





рогк теаїба! Іебегказѕ їгі- 
р ѕраге и6$ ѕаїаті Іеї 
НТМЕ 
<аіу с1аз5="зоте В 1п8-теап1п8-+и1" ><41м> 
І Пауе а пісе $Фопе агі Богаег, 
‚Чоп"Е І Іоок рге у? Рис. 2.57. Наше изображение 
</91\></91\> используется в качестве 
рамки варьирующейся высоты 


тідпоп Ба! р сом. 


.ѕотеһіпе-теапіпеғи1 { 
Баскёгоипа: иг1(ѕ&опе-аг+.јрр); 
баскегоипа-5іғ2е: соуег; 
райдіпе: 1ет; 

} 


.ѕотеһіпе-теапіпе+Ғи1 > іу { 
баскегоипа: мһіте; 
райдіпе: 1еп; 


Это решение хорошо работает и создает «рамку», показанную на рис. 2.57, но 
требует наличия дополнительного элемента НТМІ.. Таким образом, оно не 
оптимально: оно не только смепгивает представление и структуру, но в опре- 
деленных случаях изменить НТМТ-код вообще невозможно. Существует ли 
способ реализовать то же самое с помощью одного элемента? 


Решение 


Благодаря градиентам С55 и расширениям для фона, представленным 
в Васкогоипаѕ & Вог4ег$ Геуе] З (Һір://З.огд/ТА/сѕ53-раскогоипа), мы можем 
достичь того же самого эффекта с одним элементом. Главная идея заключается 
в использовании второго фона чисто-белого цвета, который будет закрывать изо- 
бражение с камнем. Однако для того, чтобы изображение камня проглядывало 
сквозь область рамки, к этим двум изображениям необходимо применить разные 
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Васоп {рзшт 4080г атс! си афрізісігщ с 


зоарие тошо гоцаф сх баас ргоібегі 


База Һат Боск. Ѕашзаре ЬесГьссГ тя аБашір 
Боос пойи. Оуіз ЬссГ лібр яши, сиріт ш. 
тпақпа ѕајалті Бопе. 171 1аБойз Ьгезаоіа гдеує 
Ыкоа арођассег. Сһос рога БеЙу зей заезде: 


Васоп ірвшт боёог алс! сы афріісігщ ен 
хоке цгошой гочпй сх бифаск ргоібеои 
Азеаза Һат Боск. Ѕашладе Бес ЬсеГ гї абаиір. 
оос тойи. Оуіз Ьссблті-ір яши, сиріт ш 
тата зат Бопе. Ое Іаћогіз Ьгезаоја гдсує 
Ыпопа абђаевст. Сһис рогі ЬеПу зей заизавс 





Рис. 2.58. Маленький урок 
о принципах работы Богаег- 
1паёе 

Наверху: наше нарезанное 
изображение; пунктирными 
линиями обозначены линии 
разреза 


Посередине: богдег-1тазе: 
33.34% иг1 (...) эгефсИ; 
Внизу: Бог4ег-1таёе: 33.34% 
иг1(...) гоипа; 

Вы можете 
поэкспериментировать 

с кодом на ћ&р://рІау. 
сѕѕѕесгеіѕ.іо/богаег-ітаде 


22222 


У меня замечательная рамка, 


разве я не прекрасен? 





Рис. 2.59. В нашей первой 
попытке мы очень близки 


к успеху 


• Фон и рамки 


значения Баскргоипа-с11р. И последнее, о чем нужно 
помнить: мы можем использовать только фоновый 
цвет последнего слоя, поэтому нам потребуется 
имитировать белый фон с помощью градиента С$5 
от белого до белого цвета. 


Вот как могла бы выглядеть первая попытка во- 
плотить эту идею: 


раа41т5: 1ет; 

Богаег: 1ет $0114 Ёғапѕрагеп+; 

БасКёгоипа: 1Ііпеаг-егадіепї (мһіёе, мһіќе), 
иг1(ѕ+опе-аг.јре); 

браскегоипӣ-5іғе: соуег; 

баскегоипа-с1ір: раааіпр-бох, Богаег-Бох; 


Как видно на рис. 2.59, результат очень близок 
к тому, чего мы хотели достичь, но все же наблюда- 
ется какое-то странное повторение. Причина в том, 
что значение по умолчанию для басквгоџпа-огівіп 
равно райдіпв-Бох, и поэтому размер изображения 
вычисляется в зависимости от размера области за- 
бивки, а также помещается в точку 0, 0 относительно 
области забивки. Все остальное — это всего лишь по- 
вторения первой фоновой плитки. Чтобы исправить 
ситуацию, необходимо также установить значение 
Богаег-Бох для свойства баскегоипа-огівіп: 


раа41т5: 1ет; 

Богадег: 1ет $0114 Ёғапѕрагеп+; 

БасКёгоипа: 1іпеаг-егадіепї (мһі+е, мп1{е), 
иг1 ($$ опе-аг*.3рё); 

БасКёгоипа-$12е: соуег; 

браскегоипа-с1ір: раааіпр-бох, Богаег-Бох; 

баскегоипа-огірвіп: Богаег-Бох; 


Эти новые свойства также доступны в сокращении 
расквгоцпа, которое способно помочь нам здорово 
уменьшить объем кода: 


раа41т5: 1ет; 

Богаег: 1ет $0114 Ёғапѕрагеп+; 

Баскёгоипа: 
Ііпеаг-ргадіепі (мһіе, мһіёе) раааіпр-бох, 
иг1(ѕ+опе-агё.јре) Богдег-Бох @ / сомег; 
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ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/сопіпиоиѕ-ітаде-Богаегѕ 


Разумеется, ту же технику можно применять и с узо- 
рами, основанными на градиентах. Например, 
взгляните на следующий код, в котором мы генери- 
руем рамку в стиле старомодного конверта: 


радаіпе: 1ет; 

Богаег: 1ет $50114 &ғапѕрагеп+; 

БасКёгоипа: 1Ііпеаг-егадіепі (мһі+е, мһіёе) 
рааа1пт=-Бох, 
гереа+іпе-1іпеаг-вгадіепї (-454ев, 

геа 9, геа 12.5%, 

{гапзрагепЕ Ө, ТгапзрагепЕ 25%, 

#58а 0, #58а 37.5%, 

{гапзрагеп{ Ө, Егапзрагепе 50%) 
Ө / 5ем бет; 





Рис. 2.60. Настоящий 
старомодный конверт 


Результат показан на рис. 2.61. Ширину полос ” т ТТ ТР 


можно с легкостью поменять с помощью свойства 
Моя рамка напоминает 


БаскЕгоипа-512е, а ширина рамки регулируется объ- старомодные конверты, 
явлением Богдег. В отличие от нашего примера разве не круто? й 
с изображением камня, этот эффект также можно „ 
воплотить с помощью Богаег-1таре: 97мм . 

2; . Рис. 2.61. Наша рамка 
райдіпв: 1ет; — в стиле старомодного 
Богаег: 16рх ѕо1іа +гапѕрагеп+; конверта 


рогаег-імаве: 16 гереаіпе-1іпеаг- 
5гад1еп* (-454ез, 
геа 0, геа 1ет, СОВЕТ 
©гапѕрагепі Ө, +гапѕрагепї 2ет, 
#58а Ө, #58а Зет, 
{гапзрагеп{ 9, &гапѕрагепё 4ет); 


Для того чтобы увидеть это 

в действии, зайдите на Һр:// 
ріау.сѕѕѕесгеќѕ.іо/міпќаде- 
епуеіоре-Богаег-ітаде и поэк- 


Однако подход с Богаег-1таре влечет за собой не спериментируйте с изменени- 
сколько проблем: ем значений. 


О значение Богаег-ітаве-ѕ1ісе необходимо обновлять каждый раз, когда мы 
меняем Богаег-міа+ћ, для того чтобы они соответствовали друг другу; 





Ч так как с богдег-ітаре-ѕ51ісе невозможно использовать значения, выраженные 
вет, мы ограничены исключительно пикселами при определении толщины 
рамки; 


О толщину полос необходимо кодировать в позициях границ перехода цвета, 
поэтому для ее изменения потребуется внести четыре правки. 
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ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/міпёаде-епуеіоре 


& Рһоїоѕзһор Ме ЕБ Ещеодно интересное применение данной техники — 
ге = е создание рамок из марширующих муравьев! Рамки 
гр. у а | „а ИЗМарширующих муравьев — это пунктирные рам- 

- ки, переливающиеся так, что создается впечатление, 

будто по периметру бежит цепочка муравьев. Они 

чрезвычайно часто встречаются в графических ин- 

терфейсах пользователя; в графических редакторах 

они практически повсеместно используются для 
обозначения выделенных областей (рис. 2.62). 





х ЦпиШед-1 @ 200% (1ауег 








У. 


Рис. 2.62. Марширующие 


муравьи заюде исполезиется Для того чтобы создать марширующих муравьев, мы 


в АдоБе Рћоќоѕћор для воспользуемся одной из вариаций эффекта «старо- 
обозначения выделенной модного конверта». Мы сделаем полосы черными 
области и белыми, уменьшим ширину рамки до 1рх (вы за- 


метили, что полосы уже превратились в пунктирную 
рамку?) и заменим басквгоипа-ѕіғе чем-нибудь более подходящим. Затем мы 
анимируем Баскегоипа-ро$1+1оп до 100%, чтобы создать переливающийся эффект: 


@кеу+Ғгамеѕ ап5ѕ { +о { Баскегоипа-роѕіїіоп: 100% } } 


.пагсһіпе-апѕ { 
райдіпе: 1ет; 
рогӣег: 1рх $0114 ©гапѕрагепт; 
Баскёгоипа: 
Ііпеаг-ргадіепі (мһі+е, мһіёе) раааіпр-бох, 
гереа+іпе-1іпеаг-вгадіепі(-45ӣер, 
р1Іаск 9, Б1аск 25%, миле Ө, мһі+е 50% 
) 9 / „бет „бет; 
апітаёіоп: апё$ 125 11пеаг 1и1п1{е; 


Результат вы можете видеть на рис. 2.63. Очевидно, этот трюк полезен не толь- 
ко для имитации марширующих муравьев, но и для создания всевозможных 
необычных пунктирных рамок, например многоцветных и с промежутками 
нестандартной величины между черточками. 


Единственный способ добиться схожего эффекта с помощью богаег-ітаве — 
использовать анимированное изображение в формате СТЕ в качестве Богаег- 
1таве-зоигсе, как демонстрирует пример на странице ИЁр://сНизЧапога.сот/ 
0109/2014/04/28/тагсһіпо-апіѕ-апіттаѓеа-ѕеіесіїоп-гесѓапоіе-іп-сѕѕ. Когда в браузерах 
появится поддержка градиентной интерполяции, это можно будет делать и по- 
средством градиентов, хотя и грубым, хаотичным путем с большим количеством 
У\У/ЕТ-кода. 
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ПОПРОБУЙТЕ САМИ! в---------=------------ 


Һр://рІау.сѕѕѕесгеѕ.іо/тағсһіпд-апёѕ 


Однако свойство Богдег-1таве также обладает боль- 
шой мощью и может быть весьма полезным в со- 
четании с градиентами. Например, предположим, +------------------------ 
что нам требуется только фрагмент верхнего края Рис. 2.63. В книге, 

рамки, скажем, для оформления сноски. Все, что нам разумеется, невозможно 

для этого нужно, — это богӣег-ітаве и вертикальный показать марширующих 
градиент, в котором жестко закодирована точка об- муравьев (стоп-кадр 

резки рамки. Шириной рамки управляет... Богаег- Выглядит как обычная 


міа+п. Соответствующий код мог бы выглядеть так: ПУНКТИРная рамка); зайдите 
на страницу С анимированным 


примером — это весело! 


Богдег-фор: .2ет $0114 Егапѕрагепі; 
Богаег-1таёе: 100% 0 Ө 11пеаг-вгаа1еп{ (90аев, 
сиггепЕСо1ог 4ет, 
{гапзрагеп{ 0); 
райдіпе-+ор: 1епт; 





1 ТЬ 15 а Юотоге. 


Рис. 2.64. Обрезка верхнего края рамки для имитации традиционной сноски 


Результат идентичен показанному нарис. 2.64. Помимо этого, так как мы указали 
все значения в единицах ет, этот эффект будет подстраиваться под изменения 
значения #опё-ѕіхе. А благодаря использованию сиггепёСо1ог он также будет 
адаптироваться к изменениям со1ог (в предположении, что мы хотим, чтобы 
рамка была того же цвета, что и текст). 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/Ёооёпоїе 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Васкагоцпаѕ & Вогаегѕ: ћір://\3.ого/ТВ/с55-раскдгоипаѕ 
С55 Ітаде Маіиеѕ: Һр://%3.огд/ТЕ/с55-ітадеѕ 





Ө Гибкие эллипсы 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые навыки использования свойства богдег- гааіиѕ 





Рис. 3.1. Круг, 
сгенерированный путем 
указания фиксированных 
габаритных размеров 
квадрата и значения Богаег- 
гааіиѕ, равного половине 
длины его стороны 


Проблема 


Вероятно, вы замечали, что любой квадратный эле- 
мент, для которого определено достаточно большое 
значение Ббогӣег-гааіиѕ, можно превратить в круг 
с помощью примерно такого С55$-кода: 


баскегоипа: #63; 

міаёһ: 200рх; 

һеірһ: 200рх; 

рогдег-гаӣіиѕ: 100рх; /* >= половины длины 
стороны */ 


Возможно, вы также замечали, что в подобной ситуа- 
ции можно было бы указать любое значение радиуса 
больше 196рх и все равно получить в результате круг. 
Причина объясняется в спецификации: 


Если сумма любых двух радиусов соседних рамок превышает размер поля рамки, 
пользовательские агенты должны пропорционально уменьшать используемые 
значениях всех радиусов рамки, чтобы наложения не происходило. 


С55 Васкодгоипаѕ & Вогаегѕ 1еме! З 
(НЫр://м3.огд/ТВ/с$$3-Баскагоипа/#согпегоуенар) 


Однако часто бывает так, что указать точные значения 
ширины и высоты элемента невозможно, так как мы 
хотим, чтобы он подстраивался под свое содержи- 
мое, что может быть неизвестно наперед. Даже если 
мы проектируем статичный веб-сайт и его точное 
содержимое определено заранее, не исключено, что 
в какой-то момент мы захотим модифицировать 
его или он будет отображаться с использованием 
резервного шрифта с другими метриками. В этом 
случае мы хотим, чтобы на выходе получался эл- 
липс в ситуации, когда ширина и высота не равны 
между собой, и круг, когда они совпадают. Однако 
наш предыдущий код не способен обработать такой 
сценарий. Результирующая фигура для случая, когда 
ширина больше высоты, показана на рис. 3.2. Можно 
ли в принципе создавать эллипсы с помощью Богаег- 
гадіиѕ, не говоря уже о том, чтобы делать их гибкими? 


Решение 


Этот факт не слишком известен, но свойство богаег- 
гад1из способно принимать разные значения для 
горизонтального и вертикального радиуса, раз- 
деленные слешем (/). Это позволяет создавать эл- 
липтическое скругление в углах элемента (рис. 3.3). 
Таким образом, если у нас есть элемент размером, 
скажем, 200рх х 150рх, то мы могли бы превратить 
его в эллипс, указав радиусы, равные половине ши- 
рины и высоты соответственно: 


Богаег-га@1и$: 100рх / 75рх; 


Результат вы можете видеть на рис. 3.4. 


Однако у этого подхода есть один крупный недо- 
статок: если габаритные размеры элемента меня- 
ются, то и значения Богаег-гаа1и$ также требуют 
корректировки. На рис. 3.5 вы можете видеть, как 
то же определение свойства богаег-гадіиѕ работает 
с элементом размером 200рх х зее@рх. Габариты эле- 
мента, меняющиеся в зависимости от содержимого, 
создают проблему. 
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Рис. 3.2. Наш предыдущий 
пример создания круга в си- 
туации, когда высота меньше 
ширины; круг, определяемый 
значением Богдег-гаа1и$, 
обозначен пунктирной линией 





Рис. 3.3. Поле с разными 
значениями горизонтально- 
го и вертикального радиуса 

в свойстве Богдег-га@1и$; 
скругление угла теперь по- 
вторяет контур эллипса, 
горизонтальный и вертикаль- 
ный радиусы которого равны 
значениям из Богдег-гаа1и$. 
Сам эллипс обозначен на ри- 
сунке пунктирной линией 





Рис. 3.4. Неравные параме- 
тры кривых, определяемые 

с помощью богаег-гааіиѕ, 
позволяют создавать эллипсы 


100 Глава 3 


Рис. 3.5. Изменение 
габаритных размеров 
элемента ломает наш эллипс; 
но есть и хорошие новости — 
эта фигура будет незаменима, 
если нам понадобится 
нарисовать цилиндр! 


• Фигуры 


Или нет? У Богдег-гад1из есть еще одна малоизвест- 
ная особенность: это свойство принимает не только 
абсолютные, но и процентные значения. Про- 
центное значение разрешается в соответствующее 
габаритное значение: горизонтальный радиус опре- 
деляет ширину, а вертикальный радиус определяет 
высоту. Это означает, что одни и те же процентные 
значения могут превращаться в разные значения 
горизонтального и вертикального радиуса. Следо- 
вательно, для того чтобы получить гибкий эллипс, 
следует заменить оба радиуса значением 56%: 


Богдег-гад1и$: 50% / 50%; 


И так как составляющие до и после слеша теперь 
равны (несмотря на то, что в итоге они разрешают- 
ся в разные значения), мы можем дополнительно 
упростить код: 


рогӣег-гааіиѕ: 50%; 


Результат — гибкий эллипс, определяемый всего 
лишь одной строкой С55-кода, независимо от его 
фактической ширины и высоты. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/еШрѕе 


ЗАНИМАТЕЛЬНАЯ СТРАНИЧКА. 
ПОЧЕМУ ВОКОЕВ-ВАОТО$? 


Многие задаются вопросом, почему свойство Бог4ег-га41из получило 
именно такое название, ведь для того, чтобы оно работало, никакие рам- 
ки (Богаег) не требуются. Казалось бы, согпег-гадіиѕ было бы намного 


более подходящим названием. Причина существования такого (заведомо 
сбивающего с толку) названия заключается в том, что Богдег-гаа1и$ 
скругляет углы поля рамки элемента. Если у элемента нет рамок, то это 
ни на что не влияет, но если рамки имеются, то скругляется внешний угол 
именно рамки. Внутренний угол подвергается меньшему скруглению (тах(@, 
Богдег-гад1и$ - рогдӣег-міаёћһ), если быть точными). 
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Полуэллипсы 


Теперь, когда мы знаем, как с помощью С55 созда- 
вать гибкие эллипсы, естественным образом воз- 
никает вопрос: можно ли посредством С55-кода 
рисовать и другие распространенные фигуры, такие 
как дуги эллипса? Давайте на мгновение задумаемся, 
что же такое половина эллипса (например, как та, 
что показана на рис. 3.6). 





Рис. 3.6. Половина эллипса 


Она симметрична относительно вертикальной оси, 
но не относительно горизонтальной оси. И даже 
если нам пока неизвестны точные значения богаег- 
гааіиѕ (при условии, что их вообще можно узнать), 
уже очевидно, что нам потребуются разные значения 
радиуса для каждого из углов. Однако пока что мы 
умеем задавать лишь одно значение для всех четы- 
рех углов. 


Половина эллипса может 

стать полукругом, если ее 

ширина будет в два раза пре- 

К счастью, синтаксис бБогӣег-гайіиѕ намного более вышать высоту (или если вы- 

гибкий. Возможно, вы удивитесь, но Богдег-гадіиѕ — 07а будет в два раза больше 

о ширины — для эллипса, раз- 

это в действительности сокращение. На самом деле 2 
резанного по вертикальной 

мы можем указать разные значения для всех четырех осу) 

углов, к тому же сделать это можно двумя способа- 

ми. Первый способ — использовать полную запись 

свойств, составляющих это сокращение: 


Ч Ббогаег-+ъор-Іе+ё-гааіиѕ 
Ч Богаег-+ор-г1вй*-гад1и$ 


О Богаег-БоЕЕот-г1вИ-гад1и$ 





О ЬБогдег-боёёот-1Іе+ё- гадіиѕ 


Второй способ позволяет создавать более емкий код, так как подразумевает 
использование все того же сокращения богдег-га@1и$, но на этот раз с несколь- 
кими значениями, разделенными пробелами. Если указать четыре значения, 
то они будут применены к каждому из четырех углов по часовой стрелке, на- 
чиная с верхнего левого. Если указать меньше четырех значений, то они будут 
умножаться обычным способом, как принято в С5$, — аналогично тому, как это 
происходит со свойством богӣег-міа+ћ. Три значения подразумевают, что чет- 
вертое совпадает со вторым. Два значения подразумевают, что третье совпадает 
с первым. На рис. 3.7 вы найдете визуальное объяснение того, как это работает. 
Мы можем даже указать разные горизонтальные и вертикальные радиусы для 
всех четырех углов, перечислив 1—4 значения до слеша и 1—4 других значения 
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после него. Обратите внимание, что эти последовательности раскрываются 
в полные наборы из четырех значений по отдельности. Например, значение 
Богаег-гаа1и$, равное 10рх / 5рх 20рх, эквивалентно 19рх 19рх 10рх 10рх / 5рх 
20рх 5рх 20рх. 


А | в 
брогаег-гааіиѕ: 0: 

е № 
Богадег-га41и$: “\ ); 
рогдег-гайіиѕ: 5”; 
Богаег-га@1и$: & 8; 


Рис. 3.7. Скругление, угол которого определяется четырьмя, тремя, двумя или одним значением 
свойства Бог4ег-гаа1и$ (значения разделяются пробелом). Обратите внимание, что для 
эллиптических радиусов можно указывать до четырех аргументов до и после слеша, и привязка 
к углам будет точно такой же (отдельно для горизонтальных радиусов до слеша и вертикальных 
радиусов после него) 


Вооружившись этими знаниями, давайте снова вернемся к проблеме половины 
эллипса. Можно ли указать такие значения Богаег-гааіиѕ, чтобы в результате 
была сгенерирована требуемая фигура? Мы не узнаем, пока не попробуем. 
Начнем с того, что запишем некоторые результаты наблюдений: 


О фигура симметрична по горизонтали, что означает, что верхний левый 
иверхний правый радиусы должны быть одинаковыми; точно так же должны 
совпадать нижний левый и нижний правый радиусы; 


О наверху нет прямого горизонтального края (то есть вся верхняя граница 
фигуры изогнута), что означает, что верхний левый и верхний правый ра- 
диусы в сумме должны давать 100% ширины фигуры; 


О исходя из предыдущих двух наблюдений, можно заключить, что горизон- 
тальные радиусы, как левый, так и правый, должны составлять 50%; 





О по вертикали скругление двух верхних углов распространяется на всю 
высоту элемента, а у нижних углов скругление отсутствует. Следователь- 
но, разумными значениями для вертикальной части богдег-гад1и кажутся 
100% 100% Ө 0; 


О так как вертикальное скругление нижних углов 
равно нулю, их горизонтальное скругление не 
играет никакой роли, поскольку результат всег- 
да будет нулевым (вы можете вообразить угол 
с нулевым вертикальным скруглением и положи- 
тельным горизонтальным? Вот-вот, разработчики 
спецификации тоже не могли). 


Сложив все это вместе, нетрудно сформулировать 
С$5-код для гибкой половины эллипса с рис. 3.6: 


Богаег-гад1и$: 50% / 100% 190% Ө Ө; 


Ничуть не сложнее сообразить, какими должны 
быть значения для создания половинки эллипса, 
разрезанного по вертикальной оси, как показанная 
на рис. 3.8: 


Бог4аег-га41и$: 100% 0 0 100% / 50%; 


В качестве упражнения попробуйте написать С$$- 
код для второй половинки эллипса. 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесге(ѕ.іо/һаіғ-еїрѕе 


Четвертинки эллипса 


После создания целого эллипса и половины эллип- 
са естественным образом возникает вопрос о чет- 
вертинке эллипса, например такой, как показана на 
рис. 3.9. Следуя той же цепочке размышлений, мож- 
но заметить, что для создания четвертинки эллипса 
необходимо для одного из углов указать 100% 
радиус как по горизонтали, так и по вертикали, 
а остальные определить безо всякого скругления. 
Поскольку процентное значение должно быть оди- 
наковым и для горизонтальных, и для вертикаль- 
ных радиусов всех четырех углов, запись со слешем 
не требуется. Код будет выглядеть так: 


Богаег-га41и$: 100% 0 Ө е; 
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Рис. 3.8. Половина эллипса, 
разрезанного вдоль 
вертикальной оси 


Аналогично примеру с поло- 
виной эллипса, когда ширина 
равна высоте, мы получаем 
четвертинку круга. 





Рис. 3.9. Четвертинка 
эллипса 
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К сожалению, на случай, если вы теперь размышляете о других долях эллип- 
са, которые можно было бы создавать с помощью богӣег-гааіиѕ (например, 
можно ли сконструировать одну восьмую эллипса? или одну треть?), должна 
вас огорчить: Богдег-гадіиѕ не поддерживает значения, которые бы позволили 
реализовать это. 


ВопВоп 


Ѕмееї С553 Витопѕ 


Виёоп Ф Сай 2 ив Ј МУ 





Рис. 3.10. Ѕітигаі мастерски применил возможности Богаег-гаа1и$ для создания 
всевозможных типов фигур для своих кнопок-конфеток 
(ВопВоп Бийопѕ — Һр://ѕітигаі.сот/агсһіуе/биќопѕ) 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесге(ѕ.іо/ачагќег-еіірѕе 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Васкдгоипаѕ & Вогаегѕ: һір://\3.ого/ТВ/с55-раскдгоипаѕ 


1 0 Параллелограммы 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовое знание трансформаций С55 


Проблема 


Параллелограммы — это расширенная версия пря- 
моугольников: их стороны параллельны, но углы 
не обязательно прямые (рис. 3.11). В визуальном 
дизайне они часто используются для придания 
оформлению динамичности и передачи ощущения 
движения (рис. 3.12). 





Рис. 3.11. Параллелограмм 


Давайте попробуем создать ссылку, оформленную с помощью С$$ в стиле ско- 
шенной кнопки. Нашей отправной точкой будет обычная плоская кнопка с очень 
простым оформлением, такая, например, как на рис. 3.13. Форму скошенного 
прямоугольника мы придадим ей с помощью трансформации ѕкем(), вот так: 


{гап$Фогт: ѕКемХ(-45Яер); 


Однако в результате этого содержимое кнопки также исказилось, стало некра- 
сивым и нечитаемым (рис. 3.14). Существует ли способ создавать скошенные 
контейнеры так, чтобы их содержимое при этом не перекашивалось? 


Решение с вложенными элементами 


Для получения желаемого результата мы могли бы применить к содержимо- 
му трансформацию, противоположную зКем(), которая отменит внешнюю 
трансформацию. К сожалению, это означает, что нам придется использовать 
дополнительный элемент НТМІ. в качестве обертки содержимого, например аїм: 
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51 АРАМ САТІАСЕ 





РЕВЗОМАЕ БЕТА $ 


ОАТЕ ОЕ ВВТН: 1.6.2014 


АРОВЕЅ5: 13 Сайіпрќоп Ка 
РНОМЕ 617) 555-МЕОМУ 
МАШ знадат@сатай. сот 





МУ ЕБОСАПОМ 


МЕОМУ ІМЅТІТОТЕ ОЕ ТОМА (МІТ) 





Рис. 3.12. Параллелограммы в веб-дизайне (автор дизайна — Мартина Питакова 
(Магііпа Ріќакоуа)) 


НТМЕ 
<а һгеҒ="#уо10" с1а$5="Би{®оп"> 


<аім>С1іск те</а4іу> 
СЫСК МЕ а. 





Рис. 3.13. Наша кнопка 
до применения каких-либо 
трансформаций 


.ри++оп { Егап$Фогт: ѕКемхХ(-45ӣер); } 
.ри+оп > 41\ { +гап$Фогт: ѕКемХ(45ӣер); } 


Как видно на рис. 3.15, этот подход работает, но 


требует дополнительного элемента НТМГ. Однако 
2229 не следует беспокоиться, если изменение разметки 
для вас неприемлемо или же если вы действительно 


Рис. 3.14. Наша скошенная стремитесь к сохранению чистоты разметки, — су- 


кнопка, текст на которой ществует также решение на чистом С$5. 
трудно прочитать 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесгеїѕ.іо/рағаПеіодгатѕ 


Решение с псевдоэлементом 


Еще одна идея — создать псевдоэлемент, к кото- 
рому будут применены все стили (фоны, рамки 
ит. п.), а затем трансформировать его. Так как 
наше содержимое не принадлежит псевдоэлементу, 
трансформация на него распространяться не будет. 
Попробуем применить эту технику для стилизации 
ссылки так, как в предыдущем разделе. 


Нам нужно, чтобы поле нашего псевдоэлемента 
оставалось гибким и автоматически наследовало 
габаритные размеры своего предка, даже когда они 
определяются содержимым. Самый простой способ 
добиться этого — применить роѕіќіоп: пе1а+іхе 
к предку, а к сгенерированному содержимому — 
роѕіїіоп: аб 5о1и{е и сделать все смещения нулевы- 
ми, чтобы оно растягивалось по горизонтали и по 
вертикали до размеров своего предка. Вот как будет 
выглядеть требуемый код: 


.ри+оп { 
ро$11оп: ге1аїіхе; 
/* цвет текста, забивки и т. п. */ 


} 
.биъ+оп: : Бефоге { 

сопфеп*: ''; 

роѕітіоп: абѕо1и+е; 

Фор: 0; гірһё: 0; Боот: 0; Те: 9; 
} 


Пока что сгенерированное поле отображается над 
содержимым, заслоняя его, и как только мы опреде- 
ляем для него какой-то фон, содержимое становится 
невидимым (рис. 3.16). Чтобы исправить это, при- 
меним 2-іпӣех: -1 к псевдоэлементу, для того чтобы 
он переместился ниже своего предка. 


После этого наконец-то можно применить к псевдо- 
элементу требуемые трансформации и наслаждаться 
результатом. Итоговый вариант кода показан далее; 
он обеспечивает тот же самый визуальный результат, 
что и предыдущая техника: 


.бри+оп { 
роѕіёіоп: ге1аїіхе; 
/* цвет текста, забивки и т. п. */ 
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Если вы применяете 
©) этот эффект к элемен- 

ту, который по умол- 
чанию является строковым 
(іпііпе), то не забудьте уста- 
новить для него другое значе- 
ние свойства аіѕріау, напри- 
мер іпііпе-Ыоск или Боск, 
иначе трансформация при- 
менена не будет. То же са- 
мое касается и внутреннего 
элемента. 


Рис. 3.15. Конечный 
результат 


Рис. 3.16. Наш 
псевдоэлемент в настоящее 
время находится выше 
своего содержимого, 

поэтому применение 

к нему баскегоипа: #58а 
приводит к тому, что увидеть 
содержимое становится 
невозможно 


108 Глава 3 • Фигуры 


} 
.рит+оп: : Бефоге { 


сопфеп*: ''; /* чтобы сгенерировать поле */ 
роѕіёіоп: арѕо1и+е; 

фор: 0; гірһё: 0; Боот: 0; 1е+е: 09; 
2-1паех: -1; 

раскегоипа: #58а; 

їгапѕҒогт: ѕкем(45аер); 


Эти техники полезны не только при применении трансформации ѕкем(). Их 
можно использовать с любыми другими трансформациями, для того чтобы 
менять форму элемента, не воздействуя на его содержимое. Например, при- 
менив вариацию данной техники с трансформацией гоёаїе() к квадратному 
элементу, вы с легкостью создадите ромб. 


Кроме того, идея использовать псевдоэлементы и позиционирование для гене- 
рации поля, которое затем стилизуется и помещается под своего предка, может 
пригодиться во множестве других ситуаций для создания самых разных типов 
эффектов, например: 


О данную технику часто использовали в качестве обходного пути при добав- 
лении нескольких фонов в ТЕЗ (автор техники — Николас Галлахер (№со|аз 
СаПазрег); Һ&р://пісоіаѕдаіадһег.соту/тиіёріе-баскогоипаѕ-апа-Богӣегѕ-уїһ-сѕ2); 


О это может быть еще одним решением для создания эффектов, подобных 
описанному в секрете «Внутреннее скругление». Догадаетесь почему? 





О спомощью этой техники можно независимо применить свойства, подобные 
орасі+у, к «фону», что также впервые воплотил Николас Галлахер (ПЁр:// 
пісоІаѕдаадһег.сот/сѕѕ-Баскдгоипа-ітаде-һаскѕ); 


О она предоставляет более гибкий способ имитации нескольких рамок на слу- 
чай, если вы не можете применить техники из секрета «Несколько рамок». 
Например, когда вам требуется несколько пунктирных рамок или несколько 
рамок с пустым пространством, заполненным прозрачными пикселами, 
между ними. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/рағаіеіодғатѕ-рѕеиао 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Тгапѕѓогтѕ: һір://%3.ого/ТК/с55-гапѕѓогтѕ 


1 1 Изображения в форме ромба 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Трансформации С55, секрет «Параллелограммы» 


Проблема 


Обрезка изображений до ромбовидной формы — распространенный прием 
в визуальном дизайне, но реализовать его на С$5 далеко не просто. На самом 
деле до недавнего времени это было практически невозможно. Поэтому ДЛЯ 





С553 Раќегпѕ, ЕхрІаіпеа 





Мапу оЁуоџ һауе ргобаЫу ѕееп ту С553 рацеги раЦету. 1 
Бесате уегу роршаг (ћгоиећһоиѓ ће уеагапа И 5$ћомей 
тапу меб деуеюрег$ һом ромегќш С553 ргайіепіѕ геаПу 
аге. Вис һом тапу геаПу ипдегѕ‹апаӣ һом (һеѕе рацегп$ 
аге сгеаѓей? Тһе Ьірреѕі Бепећг о#С55-репегаіей 
Баскргоитіѕ 15 (ћаѓ (ћеу сап бе тодібей 4иесйу міћіп (ће 
ѕсуіе зНеег. Тһіѕ Бепей! іѕ уоій і ме аге јиѕї соруіпр апа 
раѕіпе С55 сойеме доп” ипдегѕгапӣ. Ме тау аѕ ме! иѕе 
ааа ОВ! іпѕќеай. 


Рис. 3.17. После обновления дизайна в 2013 году портреты авторов в профиле на веб-сайте 
24\мауз.ога теперь отображаются в форме ромба. Это сделано с помощью техники из данного 
раздела 
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Рис. 3.18. Наше исходное 
изображение, которое мы 
собираемся обрезать по 
форме ромба 





Рис. 3.19. Противоположных 
трансформаций го+а+е() 
недостаточно для достижения 
нужного эффекта (блок 

аіу с названием „.русеиге 
обозначен пунктирным 


контуром) 


воплощения своих задумок дизайнерам прихо- 
дилось сперва обрезать требуемые изображения 
в графическом редакторе. Разумеется, не нужно 
и говорить, что такой вариант применения эффекта 
означает огромные сложности в сопровождении 
веб-сайта и гарантированную неразбериху в буду- 
щем, если кто-то пожелает изменить стилизацию 
изображений. 


Определенно, сегодня у нас уже должен быть спо- 
соб получше. В действительности таких способов 
целых два! 


Решение на основе трансформации 


Основная идея та же, что и в первом решении из пре- 
дыдущего секрета (см. секрет «Параллелограммы» 
выше), — нам необходимо обернуть наше изображе- 
ние в <аіу>, а затем применить к нему противопо- 
ложную трансформацию го+аќе(): 


НТМЕ 
<А1у с1а55="рісёиге" > 
<іте 5гс="адат-са&1асе.јрв" а1{="..." /> 
</аім> 
.ріс+иге { 


міаєһ: 400рх; 
їгапѕҒогт: го+аёе(45Яер); 
оуег+1ом: һіааеп; 


$ 

.рісёиге > іме { 
тах-міаёһ: 100%; 
{гап$Фогт: гоёаёе(-45Яер); 


Однако, как вы видите на рис. 3.19, у нас не полу- 
чилось с наскока добиться требуемой стилизации. 
Конечно, если вы планировали обрезать изображе- 
ние по форме восьмиугольника, то можете сказать, 
что работа сделана, и заняться чем-то еще. Но для 
того чтобы обрезать картинку по форме ромба, при- 
дется еще попотеть. 
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Главная проблема кроется в объявлении тах-міа+һ: 100%. 100% относится 
к стороне нашего контейнера .рісќиге. Однако мы хотим, чтобы ширина 
итогового изображения была равна диагонали исходного, а не его стороне. 
Вы уже догадались, что нам опять требуется помощь теоремы Пифагора (если 
вам необходимо освежить ее в памяти, то объяснение вы найдете в секрете 
<Диагональные полосы»). Как гласит теорема, диагональ квадрата равна 
его стороне, умноженной на 7 = 1,414213562. Следовательно, имеет смысл 
задать значение тах-міаєћ, равное 2 х 100% = 141,4213562% или, округляя, 
142%, так как мы ни в коем случае не хотим, чтобы изображение уменьшилось 
(а если оно окажется чуть больше, то все в порядке, поскольку мы все равно 
его обрезаем). 


В действительности еще лучше увеличивать изображение посредством транс- 
формации ѕса1е(), и тому есть две причины: 


О мы хотим, чтобы в ситуации, когда трансформации С$$ не поддерживаются, 
размер изображения оставался равным 100%; 





О при увеличении изображения посредством трансформации ѕса1е() оно мас- 
штабируется от центра (если не указано иное значение +гап$Фогт-ог181п). 
Если вы будете увеличивать его путем изменения значения свойства міа+п, 
то оно будет масштабироваться от верхнего левого угла и для того, чтобы 
переместить его, нам понадобится использовать отрицательные значения 
полей. 


Складывая все вместе, получаем такой финальный вариант кода: 


.рісёиге { 
міаһ: 400рх; 
їгапѕҒогт: гоба+е (45дер); 
омегҒ1ом: һіааеп; 
$ 
.рісёиге > іте { 
тах-міаєһ: 1007; 
їгапѕҒогт: гобаёе(-45аев) ѕса1е(1.42); 


Как видно на рис. 3.20, это наконец-то дает нам 
желаемый результат. 





Рис. 3.20. Наше готовое 
обрезанное изображение 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесге(ѕ.іо/аіатопа-ітадеѕ 
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Рис. 3.21. Решение, осно- 
ванное на трансформациях, 
некрасиво ломается, когда мы 
пытаемся применить его с не- 
квадратными изображениями 





Рис. 3.22. Метод на основе 
с11р-раїћ отлично 
подходит для неквадратных 
изображений 


Решение с обтравочным контуром 


Предыдущее решение работает, 
но по своей природе это грязный 
трюк. Он требует дополнительного 
элемента НТМТ, а значит, это бес- 
порядочное, запутанное и хрупкое 
решение: если нам придется иметь 
дело с неквадратными изображе- 
ниями, результат будет печальным 


(рис. 3.21). 


В действительности существует намного лучший 
способ достичь желаемого результата. Основная 
идея заключается в использовании свойства с11р- 
раһ — еще одной возможности, позаимствованной 
из 5УС. Это свойство теперь можно применять 
ик НТМГ-содержимому (по крайней мере, в под- 
держивающих браузерах), причем с использованием 
приятного и читабельного синтаксиса, в отличие 
от эквивалента в ЗУС, печально известного своим 
умением доводить людей до бешенства. У него есть 
лишь один недостаток (на момент написания этой 
главы) — ограниченная поддержка браузерами. 
Однако данное решение изящно откатывается до 
упрощенной визуализации (без обрезки), так что 
это достойная кандидатура для рассмотрения. 





Ограниченная 
поддержка 


Скорее всего, вы уже знакомы с обтравочными кон- 
турами благодаря приложениям для редактирования 
изображений, таким как АдоБе Рћоѓоѕћор. Обтравоч- 
ные контуры позволяют обрезать элемент до любой 
формы, какую вы только пожелаете. В данном слу- 
чае мы собираемся использовать фигуру ро1увоп(). 
Мы будем определять ромб, но в целом эта фигура 
позволяет задать любой многоугольник последова- 
тельностью точек, разделенных запятыми. Можно 
даже использовать проценты — итоговые значения 
будут вычисляться относительно габаритных раз- 
меров элемента. Код очень простой: 


с1ір-раїһ: ро1уёоп(50% 0, 100% 50%, 50% 100%, 
о 50%); 
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Верите или нет, но это все! Результат идентичен показанному на рис. 3.20, но 
вместо двух элементов НТМГ и восьми строк запутанного кода С$$ мы до- 
стигли желаемого с помощью всего лишь одной простой строки. 


Но этим чудесные способности с1ір-раёћ не ограничиваются. Это свойство под- 
держивает даже анимацию — при условии, что мы анимируем переход между 
двумя одинаковыми функциями фигур (в нашем случае ро1увоп()) с одина- 
ковым количеством точек. Таким образом, если мы хотим плавно раскрывать 
полное изображение при наведении указателя мыши, это можно реализовать 
таким способом: 


118 { 
с1ір-раїһ: ро1уроп(50% Ө, 100% 50%, 
50% 100%, © 50%); 
{гап$1410п: 15 с1ір-ра+һ; 


} 


іте : һомег { 
с1ір-раїһ: ро1уроп(0@ 0, 100% 6, 
100% 100%, Ө 100%); 


Кроме того, этот метод прекрасно приспосабливается к неквадратным изобра- 
жениям, что подтверждает рис. 3.22. Ах, радости современного С55... 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/аїатопа-сіїр 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 

С55 Тгапѕѓогтѕ: һіёр://%3.ого/ТК/с55-гапѕғогтѕ 
С55 Маѕкіпд: Һр: //у3.огд/ТЕ/с55-таѕкіпо 

С55 Тгапѕіёіопѕ: Һір://\3.ого/ТВ/с55-гапѕііопѕ 


1 2 Срезанные углы 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, знание свойства баскевгоипа- ѕіғе, секрет «Фоны в полоску» 


Проблема 


Срезание углов — это не только быстрый способ достичь цели, но и популярный 
вариант стилизации как в печатном дизайне, так и в веб-дизайне. Чаще всего 
он подразумевает обрезание одного или нескольких уголков контейнера под 
углом 45°. В последнее время, в связи с тем, что скевоморфизм начал сдавать 
позиции плоскому дизайну, этот эффект пользуется особенной популярностью. 
Когда углы срезаются только с одной стороны и каждый из них занимает 50% 
высоты элемента, это создает фигуру в форме стрелки, что также часто исполь- 
зуется в оформлении кнопок и элементов навигации типа «хлебные крошки» 


(рис. 3.23). 





Рис. 3.23. Кнопка со 
срезанными углами 
выглядит как стрелка, 
что подчеркивает ее 
предназначение 


Однако в С55 все еще недостаточно инструментов 
для создания этого эффекта с помощью простых 
и понятных однострочных решений. Из-за этого 
многие разработчики склоняются к использованию 
фоновых изображений: либо закрывают срезанные 
углы треугольниками (на одноцветном фоне), либо 
создают весь фон с помощью одного или нескольких 
изображений, где углы уже срезаны. 


Очевидно, что такие методы совершенно негибкие, 
они сложны в сопровождении и увеличивают вре- 
мя ожидания вследствие дополнительных НТТР- 
запросов и общего размера файлов веб-сайта. 


12. Срезанные углы 115 


Мпа Епа 8. Воок 
е) (= | 


Рот: 
== 03/08/2014 


то: 
"е 13/08/2014 


2 $ абшза 0 $ «ате 


(Орос Ьа ОХ 
1 )ВаБу со песе (Слим) 063 а к 





Рис. 3.24. Пример веб-сайта, где срезанный угол (нижний левый у полупрозрачного поля 
Ріпа & Воок) отлично вписывается в дизайн 


Решение 


Одно возможное решение предлагают нам всемогущие градиенты С55. Пред- 
положим, что нам требуется только один срезанный угол, скажем, нижний 
правый. Трюк в том, чтобы воспользоваться способностью градиентов при- 
нимать направление угла (например, 454ев) и позиции границ перехода цвета 
в абсолютных значениях, которые не меняются при изменении габаритных 
размеров элемента, которому принадлежит фон. 


Из вышесказанного следует, что нам будет достаточно одного линейного гради- 
ента. Мы добавим прозрачную границу перехода цвета для создания срезанного 
угла и еще одну границу перехода цвета в той же позиции, но уже с цветом, 
соответствующим фону. Код С$$ будет следующим (для угла размером 15рх): 


басквгоипа: #58а; 
Баскёгоипа: 
11пеаг-вгад1еп* (-454е=, фгапзрагепе 15рх, #58а Ө); 


Просто, не так ли? Результат вы видите на рис. 3.25. 
Технически первое объявление нам даже не требу- 
ется. Мы добавили его только в качестве обходного 
пути: если градиенты С5$ не поддерживаются, то 
второе объявление будет проигнорировано, так что 
мы как минимум получим фон сплошного цвета. 


Эй, сосредоточься! 


На углы смотри, 
а не текст читай! 
Текст только для примера! 





Теперь предположим, что нам требуются два сре- 
занных угла, скажем, оба нижних. Это невозможно 

Рис. 3.25. Элемент со 
реализовать с помощью одного градиента, так что — срезанным нижним правым 
нам понадобятся два. Первой мыслью может быть углом, созданный с помощью 
нечто подобное: простого градиента С55 
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СОВЕТ 


Мы использовали разные 
цвета (#58а и #655) для 
упрощения отладки. 

На практике оба градиента 
будут одного и того же цвета. 


Эй, сосредоточься! 


На углы смотри, 
а не текст читай! 
Текст только для примера! 





Рис. 3.26. Провалившаяся 
попытка применить эффект 
срезанного угла к обоим 
нижним углам 


Эй, сосредоточься! 
На углы смотри, 
а не текст читай! 


Текст только для примера! 





Рис. 3.27. Помощи 
баскегоипа-ѕіғе 
недостаточно 


раскегоипа: #58а; 


раскегоипа: 
Ііпеаг-ргайіепі (-45дев, +гапѕрагепё 15рх, 
#58а 0), 
1Ііпеаг-ргааіепі (45аев, +гапѕрагепё 15рх, 
#655 0); 


Однако, как можно видеть на рис. 3.26, это не рабо- 
тает. По умолчанию оба градиента занимают всю 
площадь элемента, так что они заслоняют друг дру- 
га. Мы должны уменьшить их, ограничив каждый 
из них половиной элемента с помощью Басквгоипа- 
5126. 


раскегоипа: #58а; 


Баскёгоипа: 
11 пеаг-вгад1еп* (-454ев, +гапзрагепе 15рх, 
#58а 0) 
гіеһ, 
11пеаг-вгад1еп* (45аев, +гапѕрагепё 15рх, 
#655 0) 
Іеғ+; 


Баскёгоипа-$12е: 50% 100%; 


Результат вы можете видеть на рис. 3.27. Несмотря 
на то что мы применили басквгоипа-ѕіхе, гради- 
енты все равно перекрывают друг друга. Причина 
в том, что мы забыли выключить баскегоипа-гереа+, 
поэтому каждый из фонов повторяется дважды. 
Следовательно, один из фонов все так же заслоняет 
другой, но на этот раз за счет повторения. Новая 
версия кода выглядит так: 


раскегоипа: #58а; 
раскегоипа: 
Ііпеаг-ргайіепі (-45ев, ёгапѕрагепё 15рх, 
#58а 0) гіеһ+, 
1Ііпеаг-ргааіепі (45аев, +гапѕрагепё 15рх, 
#655 0) Іе#+; 
Баскёгоипа-$12е: 50% 1007; 
Баскёгоипа-гереа*: по-гереа+; 


Результат вы можете увидеть на рис. 3.28 и убедиться, что он — наконец-то! — 
работает! Вы наверняка уже догадались, как применить этот эффект ко всем че- 
тырем углам. Вам потребуются четыре градиента и код, подобный следующему: 


басквгоипа: #58а; 


Баскёгоипа: 
11пеаг-вгад1еп* (1354е=, Егапзрагепе 15рх, 
#58а 9) 
Фор Те+е, 
11пеаг-вга1еп* (-1354е=, &гапѕрагепё 15рх, 
#655 0) 
Фор гіеһ, 
Ііпеаг-вгааіепї (-45ӣер, гапѕрагепі 15рх, 
#58а 0) 


боот гіећ, 
Ііпеаг-вгааіепї (454ев, +гапѕрагепё 15рх, 
#655 0) 
роот Іеғ#+; 
Баскргоипа-ѕіғе: 50% 50%; 
Баскёгоипа-гереа*: по-гереа+; 


Результат показан на рис. 3.29. Но проблема пре- 
дыдущего кода в том, что он трудно поддается со- 
провождению. Он требует внести пять правок для 
изменения фонового цвета и четыре для изменения 
величины угла. Примесь, созданная с помощью 
препроцессора, могла бы сократить количество по- 
вторений. Вот как этот код будет выглядеть в $С$5: 


$С55 
@тіхіп беуе1еаӣ-согпегѕ ($65, 
$1:0, $1г:$+1, $6г:$11, Ф61:$1г) { 
БасКёгоипа: $65; 
Баскёгоипа: 
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Эй, сосредоточься! 


На углы смотри, 
а не текст читай! 
Текст только для примера! 





Рис. 3.28. Теперь оба 
нижних угла, левый и правый, 
успешно срезаются 


Эй, сосредоточься! 
На углы смотри, 
а не текст читай! 


Текст только для примера! 





Рис. 3.29. Эффект, 
примененный ко всем 
четырем углам посредством 
четырех градиентов 


11пеаг-вгаЯ1еп{(1354ев, {гапзрагепе $+1, $68 0) 


Фор Те+е, 


11пеаг-вгаа1еп*(2254ев, {гапзрагепЕ $4г, $65 0) 


Фор гірһ, 


Ііпеаг-ргадіепё (-454ев, {гапзрагепе $6г, $68 0) 


боот гірһ, 


1іпеаг-ргадіепё (454ев, Егапзрагепе $61, $68 0) 


роот Іе+#+; 
Баскёгоипа-$12е: 50% 50%; 
Баскёгоипа-гереа*: по-гереа*; 


} 


Затем, когда необходимо, его можно будет вызывать, как показано далее, 


с 2—5 аргументами: 


5С55 
@іпс1иае беме1еа-согпегѕ(#58а, 15рх, 5рх); 
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В этом примере мы получим элемент, у которого верхний левый и нижний 
правый углы срезаны на 15рх, а верхний правый и нижний левый — на 5рх, ана- 
логично тому, как работает Богдег-га@1из, когда мы указываем меньше четырех 
значений. Это возможно благодаря тому, что мы в нашей примеси 5С$5$ также 
позаботились о значениях по умолчанию для аргументов, — и да, эти значения 
по умолчанию могут ссылаться и на другие аргументы тоже. 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.с555есге..ю/Беме!-согпег$-дгаФепе$ 


Искривленные срезанные углы 


)МТАСТ 





ши СЕОСЕЅКЕ очи 2010—02 В Матар у Бы Мане от СТТ 


Рис. 3.30. Превосходный пример использования искривленных срезанных углов 
на веб-сайте Һр://929еодеѕке.сот; дизайнер сделал их центральным элементом 
оформления: они присутствуют в навигации, в содержимом и даже в нижнем колонтитуле 


Вариация метода с градиентами позволяет создавать искривленные срезанные 
углы — эффект, который многие называют «внутренним радиусом рамки», 
так как он выглядит словно инвертированная версия скругленных углов. 
Единственное отличие заключается в использовании радиальных градиентов 
вместо линейных: 
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басквгоипа: #58а; 
Баскёгоипа: 
гаа1а1 - вгад1еп* (с1гс1е аї фор Те, 
{гапзрагеп{ 15рх, #58а 0) фор 1е?+, 
гаа1а1 - вгад1еп* (с1гс1е аї фор гірһ+, 
{гапзрагеп{ 15рх, #58а 0) Фор гіеһ+, 
гаа1а1 -вгад1еп* (с1гс1е аї боїёот гірһ, 
{гапзрагеп{ 15рх, #58а 0) боот гіеһ+, 
гаа1а1 - вгад1еп* (с1гс1е аї Ббоїёот 1Іе++, 
{гапзрагеп{ 15рх, #58а 0) боот 1е++; 
БасКёгоипа-$12е: 50% 50%; 
БасКёгоипа-гереа*: по-гереа*; 


Результат показан на рис. 3.31. Так же как и в пре- 
дыдущей технике, размером угла можно управлять 
посредством позиций границ перехода цвета, а при- 
месь способна и этот код сделать более пригодным 
для дальнейшего сопровождения. 


Эй, сосредоточься! 


На углы смотри, 
а не текст читай! 
Текст только для примера! 





Рис. 3.31. Искривленные 
срезанные углы, сделанные 


Бр: //р1ау.с$55есге(5.10/5соор-согпег$ с помощью радиальных 
градиентов 


ПОПРОБУЙТЕ САМИ! 


Решение со строковым $5\С и Богаег-птаде 


Хотя решение, основанное на градиентах, работает, у него есть несколько не- 
достатков: 


О код очень длинный и полон повторений. В самом распространенном случае, 
когда нам требуется обрезать все четыре угла на одинаковую величину, из- 
менение этой величины влечет за собой четыре правки в коде. Аналогично, 
для изменения фонового цвета также необходимы четыре правки, а если 
учитывать резервное решение, то все пять; 


О анимировать изменение величины срезанного угла невероятно сложно, 
а в некоторых браузерах вообще невозможно. 


К счастью, в зависимости от желаемого результата мы можем воспользоваться 
еще парой методов. Один из них подразумевает объединение Богдег-1таве со 
строковым ЗУС-кодом, в котором и генерируются углы. Зная, как работает 
Богаег-1таре (если вам необходимо освежить эти знания в памяти, подсказку 
вы найдете на рис. 2.58), можете ли вы уже представить, как должен выглядеть 
требуемый 5УС-код? 


Так как габаритные размеры для нас неважны (Богаег-ітаре позаботится о мас- 
штабировании, а ЗУС-рисунки идеально масштабируются вне зависимости от 
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габаритов — будь благословенна векторная графика!), все размеры можно при- 
равнять к единице, для того чтобы оперировать более удобными и короткими 
значениями. Величина срезанного угла будет равна единице, и прямые стороны 
также будут равны единице. Результат (увеличенный для удобства восприятия) 
будет выглядеть как на рис. 3.32. Код, необходимый для этого, показан далее: 


Богаег: 15рх $0114 ёгапѕрагеп+; 
рогаег-ітаве: 1 иг1('да+а:ітаре/ ѕув+хт1, \ 
<5\у8 хт1іпѕ= "һр: //ммм.м3 .0г2/2000/5ур" 
міаёћ="3" һеіеһё="3" +111="%2358а">\ 
<ро1увоп роіпіѕ="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/›\ 
</5%р>'); 


Обратите внимание, что размер шага нарезки равен 1. Это не означает 1 пиксел; 
фактический размер определяется системой координат 5УС-файла (потому-то 
у нас и отсутствуют единицы измерения). Если бы мы использовали проценты, 
то нам пришлось бы аппроксимировать 1/3 изображения дробным значением, 
вроде 33.34%. Прибегать к приблизительным значениям всегда рискованно, так 
как в разных браузерах значения могут округляться с разной степенью точ- 
ности. А придерживаясь единиц изменения системы координат 5УС-файла, 
мы избавляем себя от головной боли, сопутствующей всем этим округлениям. 


Результат показан на рис. 3.33. Как вы видите, сре- 
занные углы присутствуют, но фона нет. Эту про- 
блему можно решить двумя способами: либо опре- 
делить фон, либо добавить ключевое слово +111 
к объявлению Богаег-ітаре, чтобы центральный 
элемент нарезки не отбрасывался. В нашем примере 
мы лучше определим отдельный фон, так как это 





Рис. 3.32. Наше определение будет также служить обходным путем 
изображение для рамки, ДЛЯ браузеров, не поддерживающих данное решение. 
сделанное с помощью $\/С, 

и соответствующая нарезка Помимо этого, вы, вероятно, заметили, что теперь 


срезанные углы меньше, чем при использовании 
предыдущей техники, и это может поставить в ту- 
пик. Мы ведь задали ширину рамки, равную 15рх! 
Причина в том, что в решении с градиентом эти 
15 пикселов отсчитывались вдоль градиентной 
линии, которая перпендикулярна направлению гра- 
диента. Однако ширина рамки измеряется не по 
диагонали, а по горизонтали/вертикали. Чувству- 
рис: 3:33 Исользование ете, к чему я веду? Да-да, снова вездесущая теоре- 
$\С-кода со свойством ма Пифагора, которую мы активно использовали 
Богаег-1таве в секрете «Фоны в полоску». Схема на рис. 3.34 


должна прояснить ситуацию. Короче говоря, для 
того, чтобы достичь того же визуального резуль- 
тата, нам необходима ширина рамки, в 4/2 раз пре- 
вышающая размер, который мы бы использовали 
в методе с градиентом. В данном случае это будет 
15х32, = 21,213203436 пиксела, что разумнее всего 
аппроксимировать до 20рх, если только перед нами 
не стоит задача как можно точнее приблизить размер 
диагонали к заветным 15рх: 


Богаег: 20рх ѕо1іа +гапѕрагеп+; 

рогаег-ітаве: 1 иг1( ' аа: ітаре/ ѕур+хт1, \ 
<5\& хт1п5=" Ир: //мим.м3 .ог&/2000/5$\5" 

міаёћ="3" һеіеһё="3" +111="%2358а">\ 
<ро1увоп роіпіѕ5="0,1 1,0 2,0 3,1 3,2 2,3 1,3 
0,2"/>\ 

</5ур>'); 

Баскегоипа: #58а; 


Однако, как можно видеть нарис. 3.35, результат не 
совсем тот, которого мы ожидали. Куда делись наши 
кропотливо срезанные углы? Не бойся, юный пада- 
ван, углы все так же на месте. Вы сразу же поймете, 
что произошло, если установите другой фоновый 
цвет, например #655. 


Как демонстрирует рис. 3.36, причина, почему наши 
углы исчезли, кроется в фоне: тот фон, который мы 
выше определили, попросту заслоняет их. Все, что 
нам нужно сделать для устранения этого неудоб- 
ства, — с помощью Ббасквгоипа-с1ір запретить фону 
подлезать под область рамки: 


Богаег: 20рх ѕо1іа +гапѕрагеп+; 

рогаег-ітаве: 1 иг1( ' аа: ітаре/ ѕур+хт1, \ 
<5\& хт1пѕ="ҺЕЕр: //ммм.м3 .ог&/2000/5\5"\ 

міаёћ="3" һеіеһё="3" +111="%2358а">\ 
<ро1увоп роіпіѕ5="0,1 1,0 2,0 3,1 3,2 2,3 1,3 
0,2"/>\ 

</з\в>'); 

баскегоипа: #58а; 

БасКёгоипа-с11р: рааадіпр -бох; 


Теперь проблема решена, и наше поле выглядит 
точно так же, как на рис. 3.29. К тому же на этот 
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Рис. 3.34. Значение богаег- 
міа+п, равное 15рх, создает 
угол размером 

15/4/2 = 10,606601718 (если 
измерять по диагонали), по- 
этому наши срезанные углы 
кажутся меньше 


Эй, сосредоточься! 

На углы смотри, 

а не текст читай! 

Текст только для примера! 





Рис. 3.35. Куда делись наши 
миленькие углы? 


Эй, сосредоточься! 
На углы смотри, 
а не текст читай! 


Текст только для примера! 





Рис. 3.36. Установив для 
свойства раскргоипа другой 
цвет, мы решаем загадку... 
исчезнувших углов 
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раз мы можем с легкостью изменить размер углов, 
Эй, сосредоточься! внеся всего лишь одну правку: просто скорректи- 
На углы смотри, руем ширину рамки. Мы можем даже анимировать 
ане текст читай! этот эффект, потому что богдег-міаєћ поддерживает 
Текст только для примера! анимацию! А для смены фона требуется теперь две 
правки вместо пяти. Кроме того, так как наш фон не 
зависит от эффекта, накладываемого на углы, мы мо- 
занными углами и радиаль- жем определить для него градиент или любой другой 
ным градиентом на фоне узор, при условии, что по краям цвет все так же будет 
равен #58а. Например, на рис. 3.37 мы используем 
радиальный градиент от цвета һѕ1а(6@,0%,100%,.2) 
ДО Егапзрагеп*. 





Рис. 3.37. Элемент со сре- 


Осталось решить лишь одну небольшую проблему. Если Богдег-1таве не поддер- 
живается, то резервное решение не ограничится отсутствием срезанных углов. 
Из-за того что фон обрезан, пространство между краем поля и его содержимым 
уменьшится. Для того чтобы исправить это, необходимо для рамки определить 
тот же цвет, который мы используем для фона: 


Богаег: 20рх $0114 #58а; 
рогаег-ітаве: 1 иг1('да+а:ітаре/ ѕув+хт1, \ 
<5\8 хт1пѕ= "Һр: //ммм.м3 .ог&/2000/5\5" \ 
міаёћ="3" һеіеһё="3" +111="%2358а">\ 
<ро1увоп роіпіѕ="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/›\ 
</5%р>'); 
раскегоипа: #58а; 
раскегоипа-с1ір: раааіпр -бох; 


В браузерах, где наше определение боғаег-ітаре поддерживается, этот цвет 
будет проигнорирован, но там, где богдег-ітаве не работает, дополнительный 
цвет рамки обеспечит более изящное резервное решение, которое выглядит как 
на рис. 3.35. Единственный его недостаток — увеличение количества правок, 
необходимых для изменения фонового цвета, до трех. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/Бемеі-согпегѕ 


Спасибо Мартину Сали (Магїїјп ЅаІу, Һр://бміНегсот/тагіјпѕаіу) 
за первоначальную идею использовать богаег-ітаре и строковый 
$\сС-код в качестве решения для эффекта срезанных углов. Ссыл- 
Благодарности ка была опубликовала в твите от 5 января 2015 года: һ&р://ёміќег. 
сот/тагіјпѕаіу/ѕ{аиѕ/552152520114855936. 
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Решение с обтравочным контуром 


Хотя решение с Богдег-1таре очень компактное и хорошо со- 
ответствует принципам ОКУ, оно накладывает определенные 
ограничения. Например, наш фон все так же должен быть либо 
целиком, либо хотя бы вдоль кромок заполнен сплошным 
цветом. А что, если мы хотим использовать другой тип фона, Ограниченная 
например текстуру, узор или линейный градиент? Поновржна 





Существует другой способ, не имеющий подобных ограничений, хотя, конечно, 
определенные ограничения его применения есть. Помните свойство с1ір-раёћ 
из секрета «Изображения в форме ромба»? Обтравочные контуры С$$ об- 
ладают поразительным свойством: они позволяют смешивать процентные 
значения (с помощью которых мы указываем габаритные размеры элемента) 
с абсолютными, обеспечивая невероятную гибкость. 


Например, код обтравочного контура, обрезающего элемент до формы прямо- 
угольника со скошенными углами размером 26рх (если измерять по горизон- 
тали), выглядит так: 


баскегоипа: #58а; 

с11р-раеи: ро1увоп( 
20рх 0, са1с(100% - 20рх) Ө, 100% 20рх, 
100% са1с(100% - 20рх), са1с(100% - 20рх) 100%, 
20рх 100%, 09 са1с(100% - 20рх), 9 20рх 

); 


Несмотря на краткость, в этом фрагменте кода принципы ОКУ не соблюдены, 
и это становится одной из самых больших проблем, если вы не используете 
препроцессор. В действительности этот код — лучшая иллюстрация принципа 
УТЕТ из всех решений на чистом С55, представленных в этой книге, ведь для 
изменения размера угла здесь требуется внести це- 
лых восемь (!) правок. С другой стороны, фон можно 
поменять с помощью только одной правки, так что 
у нас есть хотя бы это. 


Одно из преимуществ данного подхода — то, что 
мы можем использовать абсолютно любой фон или 
даже обрезать подменные элементы, такие как изо- 
бражения. На рис. 3.38 показано изображение, сти- 
лизованное с использованием срезанных углов. Ни 
один из предыдущих методов не позволяет добиться для стилизации которого 
такого эффекта. Помимо этого, свойство с1ір-раєп использованы срезанные 
поддерживает анимацию, и мы можем анимировать углы; реализация 

не только изменение размера угла, но и переходы посредством с1ір-раїћ 





Рис. 3.38. Изображение, 
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между разными фигурами. Все, что для этого нужно, — использовать другой 
обтравочный контур. 


Помимо многословности и ограниченной поддержки браузерами, недостат- 
ком этого решения является то, что, если мы не позаботимся о достаточно 
широкой забивке, текст также будет обрезан, так как при обрезке элемента 
его составляющие никак не учитываются. В противоположность этому метод 
с градиентом позволяет тексту просто выходить за границы обрезанных углов 
(ведь они всего лишь часть фона), а метод с богӣег-ітаве работает так же, как 
обычные рамки, — переносит текст на новую строку. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/Бемеі-согпегѕ-сіїрреа 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 

С55 Васкдгоипаѕ & Вогаегѕ: һір://\3.ого/ТВ/с55-раскдгоипаѕ 
С55 Ітаде Маіиеѕ: Һр: //у3.огд/ТВ/с55-ітадеѕ 

С55 Тгапѕѓогтѕ: Һір://%3.ого/ТК/с55-гапѕғогтѕ 

С55 Маѕкіпд: Һр: //у3.огд/ТЕ/с55-таѕКіпо 

С55 Тгапѕіёіопѕ: һір://\3.ого/ТВ/с55-гапѕііопѕ 


С55 Васкагоипаѕ & Вогаег$ 1еуе! 4: Һір://еу.у3.огд/сѕ5%9/с55- 
Баскагоипаѕ-4 


БУДУЩЕЕ. 
СРЕЗАННЫЕ УГЛЫ 


В будущем, для того чтобы воплотить эффект срезанных углов, нам не 
придется прибегать к помощи градиентов С55, обрезки или 5\/С. Новое 
СВОЙСТВО согпег- ѕһаре, входящее в состав С$$ Васкдгоипаѕ & Вогаегѕ 
Геме! 4 (Һ&р://аеу.м3.ого/сѕѕуд/сѕѕраскагоипаѕ-4/), спасет нас от этой го- 
ловной боли. Оно будет использоваться для создания эффекта срезанных 


по разной форме углов в сочетании со свойством Ббогаӣег-гадіиѕ, которое 
необходимо для определения величины обрезки. Например, для описания 
срезанных углов размером 15рх по всем сторонам изображения достаточно 
такого простого кода: 


рогӣег-гаӣіиѕ: 15рх; 
согпег-ѕһаре: Бе\уе1; 





3 Вкладки в форме трапеций 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые трехмерные трансформации, секрет «Параллелограммы» 


Проблема 


Трапеции — это еще более генерализованные фи- 
гуры, чем параллелограммы: у них только две па- 
раллельные стороны. Две оставшиеся могут быть 
наклонены под любым углом. Эти фигуры тради- 
ционно славятся сложностью создания с помощью 
чистого С$5, но при этом очень часто используются 
в веб-дизайне, особенно для оформления вкладок. 
Если разработчики не имитируют их посредством 
скрупулезно подготовленных фоновых изображе- 
ний, то воссоздают с помощью прямоугольника 
с двумя треугольниками, сделанными из рамок, по 
бокам (рис. 3.39). 


Хотя эта техника экономит НТТР-запросы, которые 
могли бы понадобиться вследствие использования 
дополнительных изображений, и легко адаптируется 
к изменению размеров элементов, она все же далека 
от совершенства. Нам приходится создавать прак- 
тически бесполезные псевдоэлементы, а кроме того, 
мы невероятно ограничены в вариантах стилизации. 
Например, попробуйте добавить рамку, фоновый 
узор или скругленные углы к такой вкладке. 


Тгаретоа 


Рис. 3.39. Имитация трапе- 
ции с помощью рамок псевдо- 
элементов (для наглядности 
псевдоэлементы обозначены 
более темным оттенком го- 
лубого) 
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Рис. 3.40. В Сіоџа9 (ПЁр://с9.10) все открытые документы отображаются на вкладках 
в форме трапеций 


С55-ТВІСКЅ геећоџѕе” апа уоиг агеат ЈоЬ. 


АЕМАМАС ЅМІРРЕТЅ 


Ра{а!1${$ Ғог Оі егеп шри{ Туреѕ 


Іѕам ап НТМІ5 даѓе іприх (ће оћеғ дау, мћісћ һәб (һе бгорбомт аггом оп е гід, кл Гуе 
дгомп ассиѕќот (0 сіккіпо (0 геуеаі а саіепдаг батерккег іп ус (о союзе а даме. 


Егееһоџоѕе 


Туркайу, ‘па юокѕ Же пб; 


Веад АПК > еатіпо спапдез мез! 





Ном $УС Ѕһаре МогрИта Могкѕ 


Рис. 3.41. В одном из предыдущих дизайнов веб-сайта Һрѕ://с55-їгіскѕ.сот/ также фигурировали 
вкладки в форме трапеций, хотя они были скошены только с одной стороны 


Так как все хорошо известные техники создания трапеций довольно запутанны 
и порождают хаотичный, сложный в поддержке код, большинство вкладок, 
которые мы встречаем в Сети, не имеют скошенных сторон, хотя реальные 
вкладки в приложениях чаще всего выглядят как раз как трапеции. Существует 
ли разумный и гибкий способ определять трапециевидные вкладки? 


Решение 


Если бы существовала комбинация двумерных трансформаций, позволяющая 
создавать трапециевидные фигуры, то мы могли бы просто применить вариацию 
решения из секрета «Параллелограммы» и покончить с этим. К сожалению, 
такой комбинации не существует. 


Однако вообразите вращение прямоугольника в физическом, трехмерном 
мире. Чаще всего получившаяся фигура, благодаря перспективе, в двумерной 
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проекции выглядит именно как трапеция. И этот 
эффект можно имитировать в С$$ с помощью трех- 
мерного вращения: 


їгапѕҒогт: регзрес1\е(.5ет) гофа\ех(54ез); 


На рис. 3.42 видно, что в результате получается 
трапеция. Разумеется, так как мы применили трех- 
мерную трансформацию ко всему элементу, искаже- 
ние распространилось и на текст тоже. Трехмерные 
трансформации невозможно «отменять» внутри 
элемента так, как мы делали это с двумерными 
трансформациями (то есть посредством противо- 
положной трансформации). Отменить трехмерную 
трансформацию на внутреннем элементе технически 
возможно, но чрезвычайно сложно. Следовательно, 
единственный практический способ воспользовать- 
ся преимуществом трехмерных трансформаций для 
создания трапеции — применить трансформацию 
к псевдоэлементу, по аналогии с подходом, который 
мы применили для параллелограммов в секрете 
«Параллелограммы»: 


„.аь { 
ро$11оп: ге1аїіхе; 
415р1ау: 1п11пе-61оск; 


раа41т5: „5ет 1ет .35ет; 
со1ог: мһі+е; 
} 
.аь: : Бефоге { 
сопфепт{: ''; /* Чтобы сгенерировать поле */ 
роѕітіоп: абѕо1и+е; 
Фор: 0; гірһё: 0; Боот: 0; Те: 0; 
2-1п4ех: -1; 
Баскёгоипа: #58а; 
фгап$Фогт: регзресЕ1\уе(.5ет) гофафех(54ез); 
} 


Как видно на рис. 3.43, это позволяет создать про- 
стейшую трапециевидную фигуру. Но остается не- 
решенной еще одна проблема. Когда мы приме- 
няем трансформацию, не устанавливая значение 
{гап$Рогт-ог181п, элемент поворачивается в про- 
странстве вокруг своего центра. Следовательно, его 


127 
ТКАРЕ20Ір 


ТКАРЕ2О\О 


Рис. 3.42. Создание трапе- 
ции посредством трехмерного 
вращения 


Наверху: до 
Внизу: после 


ТКАРЕ20Ір 


Рис. 3.43. Применение 
трехмерной трансформации 
к полю, сгенерированному 

с помощью псевдоэлемента, 
для того чтобы трансформа- 
ция не распространялась на 
текст 





128 


ТКАРЕ20Ір 


Рис. 3.44. Наша трапеция, 
наложенная на изначальную, 
нетрансформированную 
версию элемента. Это 
позволяет увидеть, каким 
изменениям подвергается 
элемент 


Глава 3 


1 улер 


Рис. 3.45. Наша трапеция, 
наложенная на изначальную, 
нетрансформированную 
версию элемента. Это 
позволяет увидеть, каким 
изменениям подвергается 
элемент, когда мы используем 
{гап$Фогт-ог151п: боот; 


ТКАРЕ20Ір 


ТКАРЕ20Ір 


Рис. 3.46. Попытка 
справиться с искажением 
путем увеличения высоты 
забивки приводит к тому, что 
резервное решение выглядит 
странно (наверху) 


• Фигуры 


габариты на двумерной проекции, которую мы ви- 
дим на экране, меняются сразу в нескольких аспек- 
тах, что хорошо видно на рис. 3.44: он становится 
шире и немного смещается вверх, его высота чуть- 
чуть сокращается и т. п. Все это создает сложности 
в проработке дизайна. 


Для того чтобы получить больший контроль над 
размерами элемента, можно определить свойство 
гапѕҒогт-огіріп: бобом; — оно фиксирует осно- 
вание элемента при повороте его в пространстве. 
Отличие от предыдущего варианта вращения вы 
видите на рис. 3.45. Теперь ситуация стала намного 
более предсказуемой: уменьшается только высота 
элемента. Однако это уменьшение намного более 
ярко выражено, так как весь элемент поворачивается 
в сторону от наблюдателя, тогда как в предыдущем ва- 
рианте одна половина поворачивалась «за» экраном, 
а вторая — перед ним, и в трехмерном пространстве 
элемент в целом оказывался ближе к наблюдателю. 
Для того чтобы справиться с искажением, можно 
было бы увеличить забивку сверху. Однако в браузе- 
рах, не поддерживающих трехмерную трансформа- 
цию, результат будет выглядеть ужасающе (рис. 3.46). 
Вместо этого давайте увеличим размер элемента 
посредством еще одной трансформации, для того 
чтобы в случаях, когда трехмерные трансформации 
не поддерживаются, отменялись вообще все измене- 
ния формы объекта. Немного поэкспериментировав, 
можно убедиться, что небольшого масштабирования 
по вертикали (то есть трансформации ѕса1еү()) — 
около 130% — достаточно, чтобы компенсировать 
потерянное пространство. 


Конечный результат и резервное решение показаны 
на рис. 3.47. Сейчас результат визуально эквивален- 
тен тому, который дает нам описанная выше старая 
добрая техника, основанная на рамках, — однако 
новый синтаксис намного более емкий. Превосход- 
ство данной техники становится очевидным, когда 
вы начинаете применять стилизацию ко вкладкам. 
Например, взгляните на следующий код, в котором 
мы определяем стили для вкладок с рис. 3.48: 
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пау > а { 


роѕіїіоп: ге1атімуе; ТКАРЕ2ОІр 
а1ѕр1ау: 1п11пе-61оск; 
раа41т8: „Зет 1ет 0; 


} 

пау > а: :Бефоге { ТКАРЕРОШЮ 
сопёепї: ‘''; 
роѕіїіоп: абѕо1и+е; Рис. 3.47. Восполняя 
фор: 0; гіеһ: 0; Боффот: 0; Іеї: 09; утерянную высоту с помощью 
2-1п4ех: -1; ѕса1е(), мы обеспечиваем 
Баскегоипа: #ссс; намного лучшее резервное 
баскргоипа-ітаве: 11пеаг-вгад1еп* ( решение (наверху) 


1$1а(0,0%,100%, .6), 
ћ51а(0,0%,100%,0)); 
Богаег: 1рх ѕо1іа грба(0,0,0,.4); 
рогаег-боїёот: попе; 
рогӣег-гааіиѕ: „5ет .5Ѕеп 0 9; 
рох-ѕһайом: Ө .15ет мһібе іпѕе+; 
їгапѕҒогт: регзресЕ1\уе(.5ет) гоба+еХ(5Яӣер); 
ігапѕҒогт-огівіп: боот; 








Ргојесїѕ 


Сопїепї агеа 





Рис. 3.48. Преимущество данной техники кроется в ее гибкости относительно стилей 


Как вы видите, мы определили фоны, рамки, скругленные углы и тени для 
полей — и все это сразу заработало безо всяких плясок с бубнами! Кроме того, 
всего лишь изменив значение ёгапѕҒогт-огівіп на боом Іе+ё или боот гієћ+, 
мы можем получить вкладки, скошенные соответственно влево или вправо! 
(Пример показан на рис. 3.49.) 


Несмотря на все ее добродетели, идеальной данную технику все же не назовешь. 
У нее есть один крупный недостаток: угол наклона сторон зависит от ширины 
элемента. Поэтому при работе с содержимым переменной длины получить 
трапеции с одинаковыми углами становится очень сложно. И все же описанная 
техника прекрасно подходит для элементов, включающих лишь небольшие 
вариации ширины, таких как навигационное меню. При определении таких 
элементов различия почти не заметны. 
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Сопїепї агеа 





Рис. 3.49. Скошенные вкладки получились благодаря другим значениям {гапзФогт-ог151п 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.с555есге(.10/&гарехо!А-каБ$ 





14 Простые секторные диаграммы 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, базовое знание формата 5\С, анимация в С55, секрет 
«Фоны в полоску», секрет «Гибкие эллипсы» 


Проблема 


Секторные диаграммы — даже в самой простой своей двухцветной форме — 
всегда славились сложностью создания с помощью веб-технологий, несмотря на 
широкое распространение и массу вариантов использования: от представления 
простых статистических данных до индикаторов прогресса и таймеров. 


Реализации чаще всего означают создание нескольких изображений для разных 
значений секторной диаграммы во внешнем графическом редакторе или необ- 
ходимость прибегать к помощи объемных каркасов ЈауаЅсгіре, предназначенных 
для куда более сложных диаграмм. 


Хотя это уже и вышло из категории невозможного, простого однострочного 
решения для данной задачи пока что нет. Однако уже сегодня существует не- 
сколько хороших способов достичь нужного результата, обеспечивающих к тому 
же пригодный для дальнейшей поддержки С55-код. 


Решение на основе трансформации 


Это решение оптимально в терминах разметки: оно требует создания всего 
лишь одного элемента, а остальное реализуется с помощью псевдоэлементов, 
трансформаций и градиентов С55. Начнем с простого элемента: 
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Рис. 3.50. Наша отправная 
точка (или секторная 
диаграмма, показываю- 


щая 0%) 





Рис. 3.51. Окрашивание 
правой части нашего круга 
в коричневый цвет 

с помощью простого 
линейного градиента 


НТМЕ 
<А1\у с1а$$="р1е"></41\> 


Пока предположим, что нам требуется секторная 
диаграмма, отображающая жестко закодированное 
значение 20%. Мы поработаем над тем, чтобы сде- 
лать ее гибкой, чуть позже, а для начала применим 
стили, превращающие элемент в круг, который будет 
служить нашим фоном (рис. 3.50): 


.ріе { 
міаєһ: 100рх; һеівһё: 100рх; 
Богдег-гад1и$: 50%; 
Баскёгоипа: уе11омбгееп; 


Наша секторная диаграмма будет зеленой (точнее, 
цвета уе11оиргееп), а процентное значение на ней бу- 
дет отображаться цветом #655. Первой идеей может 
быть использование трансформации скашивания 
для формирования сектора, соответствующего про- 
центному значению, но несколько экспериментов 
быстро докажут, что решение получается слишком 
беспорядочным. Вместо этого мы закрасим левую 
и правую части нашего круга двумя обозначенными 
выше цветами, а затем с помощью вращающегося 
псевдоэлемента откроем только небольшую часть, 
соответствующую требуемому процентному зна- 
чению. 


Для того чтобы закрасить правую часть круга корич- 


невым цветом, воспользуемся простым линейным градиентом: 


раскегоипа-ітаре: 


11пеаг-вгад1еп* (бо гіеһё, ёғапѕрагепі 50%, #655 Ө); 


Как демонстрирует рис. 3.51, это все, что нам требуется. Теперь перейдем 
к стилизации псевдоэлемента, который будет служить маской на нашем круге: 


.ріе: : Бефоге { 
сопёепі: ''; 
415р1ау: Б1оск; 
маг51п-1е+: 50%; 
һеіғһЕ: 1007; 
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На рис. 3.52 видно, где в данный момент находится 
наш псевдоэлемент относительно элемента, пред- 
ставляющего саму секторную диаграмму. Пока что 
с ним не связаны никакие стили, и он ничего не 
закрывает. Это просто невидимый прямоугольник. 
Прежде чем приступать к определению стилей, за- 
фиксируем несколько наблюдений: 


О так как мы хотим, чтобы псевдоэлемент закрывал 
коричневую часть круга, мы должны определить 
для него зеленый фон с помощью баскегоипа- 
со1ог: іпһегі+. Это поможет избежать дублиро- 
вания, ведь нам требуется тот же фоновый цвет, 
что и у родительского элемента; 


О мы будем вращать псевдоэлемент вокруг центра 
круга, который совпадает с серединой левой сто- 
роны псевдоэлемента, поэтому нам необходимо 
установить для него значение свойства ёгапѕҒогт- 
ог151п, равное е 50%, или же просто 1е+; 


О мы не хотим, чтобы псевдоэлемент имел форму 
прямоугольника, так как прямоугольник вы- 
лезает за границу секторной диаграммы. Следо- 
вательно, нам необходимо либо установить для 
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Рис. 3.52. Псевдоэлемент, 
который будет выполнять 
функцию маски, обозначен 
здесь пунктирными 


линиями 


Будьте осторожны — 

не напишите по ошиб- 

ке баскегоипа: 
іпһегі+; вместо баскегоипа- 
со1ог: іпһегі+;, иначе гра- 
диент также будет унаследо- 
ван! 


.ріе значение оуег+1он: һіддеп, либо использовать подходящее значение 


рогдег-гайӣіиѕ, чтобы превратить его в полукруг. 


Собирая все вместе, получаем следующий С$8-код для нашего псевдоэлемента: 


.ріе: : Бефоге { 
сопфепт*: ''; 
41$р1ау: Б1оск; 
маг51п-1е+: 50%; 
һеіғһі: 100%; 
богдег-гаӣіиѕ: 0 100% 100% Ө / 50%; 
раскегоипа-со1ог: іпһегі+; 


їгапѕҒогт-огіріп: 1Іе+ё; 


Сейчас наша секторная диаграмма выглядит как на рис. 3.54. И здесь начина- 
ется главное веселье! Теперь мы можем вращать наш псевдоэлемент, применяя 
к нему трансформацию гоѓа+е(). Для 20%, которые мы поставили себе целью 
нарисовать с самого начала, можно использовать значение 724ер (0,2 х 360 = 72) 
или просто .2&игп, что намного понятнее и читабельнее. Как это работает с не- 
которыми другими значениями, вы можете увидеть на рис. 3.53. 
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Рис. 3.53. Наша простая 
секторная диаграмма, 
отображающая разные 
процентные значения. Сверху 
вниз: 10% (364её или 
„.16игп), 20% (724ев или 
.21игп), 40% (1444ев или 


.А%игп) 





Возможно, вы подумали, что задача решена, но 
не все так просто. Наша секторная диаграмма 
прекрасно отображает процентные значения от 
0 до 50%, но когда мы пытаемся показать на ней 
значение 60% (применив вращение .бёигп), про- 
исходит то, что вы видите на рис. 3.55. Однако не 
теряйте надежды! Это можно исправить, что мы 
сейчас и сделаем. 


Если взглянуть на значения от 50% до 100% как 
на отдельную проблему, то легко заметить, что 
для нее можно использовать инвертированную 
версию предыдущего решения: коричневый псев- 
доэлемент, поворачивающийся от @ до .5%игп соот- 
ветственно. Таким образом, для сектора размером 
60% код псевдоэлемента выглядит так: 


.ріе: : Бефоге { 
сопфеп*: ''; 
аіѕр1ау: Б1осК; 
тагвіп-1Іе+і: 50%; 
һеіғһё: 100%; 
Богаег-гад1и$: 0 100% 100% Ө / 50%; 
Баскёгоипа: #655; 
їгапѕҒогт-огівіп: 1Іе+ё; 
{гап$Фогт: гофафе(.1%игп); 


Результат этого действия можно видеть на 
рис. 3.56. И так как мы теперь умеем изображать 
любые процентные значения, мы можем даже 
анимировать секторную диаграмму между 0% 
и 100% с использованием средств анимации С$$, 
создав, таким образом, привлекательный инди- 
катор прогресса: 


@кКеу#гатеѕ ѕріп { 
фо { ігапѕҒогт: поёаёе(.5&ёигп); } 


} 


@кеу+Ғгатеѕ Бр { 
50% { басквгоипа: #655; } 
} 


.ріе: : Бефоге { 


соп+епі: . 
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41$р1ау: Б1оск; 

тагвіп-1ІеҒё: 50%; 

һеіғһ+: 1007; 

рогӣег-гааіиѕ: 0 100% 100% Ө / 50%; 

Баскёгоипа-со1ог: іпһћегіт; 

їгапѕҒогт-огіріп: 1Іе+ё; 

апітаїіоп: ѕріп 35 1іпеаг іпҒіпі+е, 
ре 65 ѕћер-епа 1111 {е; 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/ріе-апітаќеа 


Все это хорошо, но как определить стили для не- 
скольких статичных секторных диаграмм с разными 
процентными значениями, то есть для самого рас- 
пространенного сценария их использования? В иде- 
альном случае нам хотелось бы иметь возможность 
напечатать простейший код вроде этого: 


НТМЕ 


<діу с1а55="ріе">20%</4ім> 
<діу с1а55="р1е">60%</41\> 


..и получить две секторные диаграммы, одна из 
которых показывает 20%, а вторая — 60%. Сначала 
мы посмотрим, какие нам нужны строковые сти- 
ли, а затем напишем короткий сценарий для раз- 
бора текстового содержимого и добавления этих 
строковых стилей. Это обеспечит элегантный код, 
инкапсуляцию, хорошую сопровождаемость и, что 
наиболее важно, доступность. 


Проблема управления процентными значениями 
секторных диаграмм С ПОМОЩЬЮ строковых стилей 
заключается в том, что С$$-код, отвечающий за 
установку процента, связан с псевдоэлементом. Как 
вы уже знаете, невозможно определять строковые 
стили на псевдоэлементах, поэтому нам понадо- 
бится проявить изобретательность. 


Решение обнаруживается в одном из самых не- 
ожиданных мест. Мы будем использовать анимацию, 
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Рис. 3.54. Наш псевдоэле- 
мент (обозначенный здесь 
пунктирным контуром) после 
того, как мы закончили опре- 
деление его стилей 





Рис. 3.55. Наша секторная 
диаграмма ломается на зна- 
чениях, превышающих 50% 
(показанное здесь соответ- 
ствует значению 69%) 





Рис. 3.56. Наша исправлен- 
ная диаграмма и значе- 


ние 60% 
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которую уже представили выше, но поставив ее на паузу. Вместо того чтобы 
прокручивать ее как нормальную анимацию, мы будем использовать отрица- 
тельные значения задержки, чтобы иметь возможность статически прогонять ее 
до любой желаемой точки и останавливать в получившемся состоянии. Звучит 
непонятно? Да, отрицательные значения апіпа+іоп-ӣе1ау не только допускаются 
спецификацией, но и чрезвычайно полезны в ситуациях, подобных этой. 


Отрицательная задержка допустима. Аналогично задержке в 9$, это означает, что 
анимация запускается немедленно, но автоматически прокручивается вперед на 
абсолютное значение задержки, как если бы воспроизведение началось указанный 
период времени назад. Таким образом создается впечатление, что анимация вос- 
производится не с начала, а с определенной точки после прохождения части пути. 


— С55 АпипаНоп$ (ее! 1 
(ПЕр://м/3.огд/ТКВ/с$5-апитаНоп$/#апитаНоп-адвау) 


Так как наша анимация поставлена на паузу, единственным кадром, который 
отобразится на экране, будет первый кадр, определяемый нашим отрицатель- 
ным значением ап1та1оп-4е1ау. Процентное значение на секторной диаграмме 
будет соответствовать доле, которую значение ап1та+1оп-де1ау составляет от 
общей продолжительности анимации. Например, с текущей длительностью 
анимации, равной 6$, для отображения процентного значения 260% нам по- 
требуется установить для ап1та1оп-ае1ау значение -1.25. Чтобы упростить 
вычисления, зададим длительность анимации, равную 1005. Помните только, 
что поскольку анимация ставится на паузу окончательно и никогда не во- 
зобновляется, определяемая нами общая длительность анимации ни на что 
больше не влияет. 


Осталась одна только последняя проблема: анима- 
ция привязана к псевдоэлементу, а мы хотим задать 
строковый стиль для элемента .ріе. Но так как для 
СОВЕТ <аіу> не определяется никакой анимации, мы можем 
установить ап1та&1оп-4е1ау как строковый стиль 
Вы можете применять эту тех- Е В 
нику и в других случаях, когда для этого элемента, а затем использовать апіта+іоп- 
возникает необходимость ис- Яе1ау: іпһегіє; на псевдоэлементе. Складывая все 
пользовать значения из диапа- Вместе, получаем такую разметку для секторных 
зона без повторений и сложных диаграмм, соответствующих значениям 26% и 60%: 
вычислений, а также для от- 
ладки анимации путем поша- 
гового прогона. Более простой,  НТМЁ 
изолированный пример данной «діу с1аѕѕ="ріе" 
техники вы найдете на веб- ѕёу1е="апітаёіоп-Яе1ау: -205"></а1м> 
странице ћ&р://ріау.сѕѕѕесгеѓѕ. <41\ с1аѕ5="ріе" 
іо/ѕайс-іпќегроІайоп. $у1е="ап1та{1оп-де1ау: -605" >< /41\> 
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А С55-код для этой анимации из представленного 
выше становится таким (за исключением правила 
.ріе, которое не меняется): 


@КеуЕгате$ ѕріп { 
о { ігапѕҒогт: гофафе(.5%игп); } 


} 





@Кеу{гате$ Бе { 
50% { Баскёгоипа: #655; } 
|: 


.ріе: : Бефоге { 
/* [Остальные стили не меняются] */ 
ап1та1оп: ѕріп 505 11пеаг 1п1п Ще, 
бє 1005 зТер-епа іпғҒіпі+е; 
апіта+іоп-р1ау-ѕїа+е: раиѕеа; 
ап1та*1оп-4е1ау: іпһегі+; 


} 60% 





На этом этапе мы уже можем преобразовать раз- Рис. 3.57. Наш текст до того, 
метку так, чтобы процентные значения использо- Как МЫ его спрячем 
вались в качестве содержимого, как первоначально 

и планировалось, а также добавить строковые стили 

апітатіоп-де1ау с помощью простого сценария: 
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$$ ('.ріе').ҒогЕасһ(Ғипсёіоп(ріе) { 
уаг р = рагѕеЕ1оа+(ріе.ёехЕСоп+еп+) ; 
ріе.ѕ+у1е.апітаёіопре1ау = '-' + р + 


5; 


}); 


Обратите внимание, что текст мы менять не стали, 
так как он нужен нам для обеспечения доступности 
и удобства использования. В данный момент наши 
секторные диаграммы выглядят как на рис. 3.57. 
Нам нужно скрыть текст, что можно сделать, не 
теряя в доступности, посредством установки со1ог: 
{гапзрагепт; в этом случае текст все так же можно 
будет выделить и напечатать. В качестве последнего 
штриха процентные значения можно выровнять по 
центру секторных диаграмм, чтобы, когда пользо- 
ватель выделяет содержимое, они не оказывались 
в произвольных местах страницы. Для этого необ- 
ходимо следующее: 
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О преобразовать свойство һеівһ диаграммы в 1іпе-һеівһ+ (или добавить зна- 
чение 1іпе-һеірһ, равное пез ей*, но это бессмысленное дублирование кода, 
поскольку 1іпе-һеівһ+ все равно установит точно такое же вычисленное 
значение); 


О задать размер и позицию псевдоэлемента посредством абсолютного пози- 
ционирования, чтобы текст не выталкивался ВНИЗ; 





О добавить +ехё-а1івп: сепёег; для центрирования текста по горизонтали. 


Финальная версия кода выглядит так: 


.ріе { 
роѕіёіоп: ге1аїіхе; 
міаёһ: 100рх; 
1іпе-һеірһё: 100рх; 
Богаег-гаа1и$: 50%; 
раскегоипа: уе11оивгееп; 
Баскёгоипа-1тазе: 
1Ііпеаг-ргадіепї (бо гіеһі, Егапзрагепе 50%, #655 Ө); 
со1ог: ігапѕрагепт; 
Техё-а1ієп: сепфег; 


} 


@Кеу{гате$ ѕріп { 
Фо { іғгапѕҒогт: гофафе(.5+игп); } 


} 


@Кеу{гате$ Бе { 
50% { баскегоипа: #655; } 


Ы 


.ріе: : Бефоге { 

сопёепі: ''; 

роѕіёіоп: арѕо1и+е; 

Фор: 0; 1е+*: 507; 

міаёһ: 50%; һеірһі: 1007; 

Богадег-га41и$: 9 100% 100% Ө / 50%; 

раскегоипа-со1ог: іпһћегі+; 

їгапѕҒогт-огіріп: 1Іе++; 

апіта+іоп: ѕріп 505 11пеаг іп+Ғіпіќе, 
бе 1005 ѕТер-епа іп+Ғіпі+е; 

апіта+іоп-р1ау-ѕїа+е: раиѕеа; 

апіта+іоп-ӣе1ау: іпһегі+; 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесге(ѕ.іо/ріе-ѕёаёіс 
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Решение на основе $\С 
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Формат 5УС упрощает решение множества задач, связанных с графиками, 
и секторные диаграммы не исключение. Однако вместо того чтобы создавать 
секторные диаграммы с помощью контуров, что потребовало бы сложных вы- 


числений, мы воспользуемся небольшим трюком. 


Начнем с круга: 


$\С 

<$\5 міаһ="100" Һеівһё="100"> 
<сігс1е г="30" сх="50" су="50" /> 
</5\5> 


Теперь применим к нему простейшую стилизацию: 


сігс1е { 
+111: уе11омегееп; 
Ѕ1ігоке: #655; 
Ѕгоке-міаёһ: 30; 


} 
<Р_158 01.ерѕ> 


Наш круг с обводкой показан на рис. 3.58. Обводка 
в УС включает не только свойства ѕїгоке и ѕ&гоке- 
міа+һ. Существует множество других, менее извест- 
ных свойств, позволяющих тонко настраивать пред- 
ставление обводки. Одно из них — ѕїгоке-даѕћаггау, 
предназначенное для создания пунктирных обводок. 
Например, мы могли бы использовать его так: 


Ѕігоке-дӢаѕһаггау: 20 10; 


Это означает, что нам нужны штрихи длиной 20 
и размер промежутка между ними, равный 16, как на 
рис. 3.59. Сейчас вы, наверное, задаетесь вопросом, 
что общего может быть у этой иллюстрации исполь- 
зования обводки в ЗУС с секторными диаграммами. 
Понятнее станет, когда мы создадим обводку с нуле- 
вой шириной и зазором, равным или превышающим 
длину окружности нашего круга (С = 2ли, так что 
в нашем случае С = 27 х 30 = 189): 


Ѕѕігоке-дӢаѕһаггау: 0 189; 


Как вы, вероятно, знаете, эти 
свойства С55 также доступны 
как атрибуты элемента 5\/С, 
что может быть более прак- 
тичным решением, если одна 
из ваших задач — обеспече- 
ние переносимости кода. 





Рис. 3.58. Наша отправная 
точка: определенный 

с помощью 5\/С зеленый круг 
с жирной обводкой цвета 


#655 





Рис. 3.59. Простая 
пунктирная обводка, 
созданная с помощью 


ѕігоке-даѕһаггау 
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_ мб 


Рис. 3.60. Несколько значений ѕёгоке-Яаѕћаггау и соответствующий визуальный результат. 
Слева направо: 0 189 40 189 95 189 150 189 





Рис. 3.61. Наша 5\/С-графика 
начинает напоминать 


секторную диаграмму 


Помните: обводка в 5\С всег- 
да находится наполовину вну- 
три, а наполовину снаружи 
элемента, с которым она свя- 
зана. В будущем мы получим 
возможность контролировать 
это поведение. 


$\С 


Как демонстрирует первый круг на рис. 3.60, такой 
код полностью убирает любую обводку, и нам оста- 
ется только зеленый круг. Но самое интересное начи- 
нается, когда мы принимаемся увеличивать первое 
значение (см. рис. 3.60): поскольку промежуток так 
велик, в результате мы получаем не пунктирную 
обводку, а лишь один из штрихов обводки, который 
покрывает заданную часть окружности. 


Вероятно, вы уже догадались, к чему я клоню: если 
мы уменьшим радиус нашего круга так, чтобы об- 
водка полностью покрывала его, то получится фи- 
гура, очень сильно напоминающая секторную диа- 
грамму. Например, на рис. 3.61 вы видите результат 
для случая, когда радиус круга равен 25, а значение 
ѕігоке-міаєһ — 50, как определяется в следующем 
фрагменте кода: 


<$\5 міаһ="100" Һеівһё="100"> 
<сігс1е г="25" сх="50" су="50" /> 


</5\8> 


сігс1е { 
#111: уе11омегееп; 
Ѕ1ігоке: #655; 
Ѕгоке-міаёһ: 50; 


Ѕігоке-ЯӢаѕһаггау: 60 158; /* 2л х 25 = 158 */ 


Превратить это теперь в секторную диаграмму, подобную тем, которые мы 
создавали с помощью предыдущих решений, довольно просто: нам нужно 
всего лишь добавить зеленый круг большего радиуса прямо под обводкой 
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и повернуть обводку на 90° против часовой стрелки, чтобы она начиналась 
наверху посередине. Так как элемент <5\в> — это также элемент НТМГ, мы 
можем просто определить для него следующие стили: 


$8 { 
{гап$Фогт: го\ате ( -904ев); 


Баскёгоипа: уе11омегееп; 
Богаег-гаа1и$: 50%; 


Финальный результат показан на рис. 3.62. С по- 
мощью этой техники создать анимацию секторной 
диаграммы от 9% до 100% еще проще. Нужно всего 
лишь анимировать средствами (С55 свойство ѕігоке- 
ДазНаггау от 6 158 до 158 158: 





@кКеу+гатеѕ +111ир { 
То { ѕгоке-даѕһаггау: 158 158; } Рис. 3.62. Готовая секторная 
} диаграмма, созданная 


с помощью 5%6 


сігс1е { 
+111: уе11омегееп; 
Ѕігоке: #655; 
Ѕгоке-міаёһ: 50; 
$+гоке-да$Ваггау: 0 158; 
апітаіоп: +111ир 55 1іпеаг іпҒіпі+е; 


В качестве дополнительного усовершенствования мы можем задать точный 
радиус круга, такой, чтобы длина его окружности была равна 100 (вернее, 
составляла бесконечно близкое к 100 значение). Тогда мы сможем задавать 
значения ѕёгоке-даѕһаггау в процентах, избегая необходимости выполнять 
вычисления. Поскольку длина окружности равна 2л7, нам требуется радиус, 
равный 100/2х = 15,915494309, что для наших целей можно округлить до 16. 
Также мы зададим габаритные размеры для элемента ЗУС с помощью атрибута 
уіемВох вместо атрибутов міаќћ и һеівһ, чтобы его размер автоматически кор- 
ректировался в зависимости от размеров контейнера. 


После всех этих модификаций разметка для секторной диаграммы с рис. 3.62 
будет выглядеть так: 


$\С 
<$\5 уіемВох="Ө 0 32 32"> 

<сігс1е г="16" сх="16" су="16" /> 
</5\5> 
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А С55-код нам потребуется такой: 


$8 { 
міаёһ: 100рх; һеівһ+: 100рх; 
їгапѕҒогт: гофате (-904ев); 
баскегоипа: уе11оивгееп; 
Богаег-гад1и$: 50%; 


} 
сігс1е { 

#111: уе11омегееп; 

Ѕігоке: #655; 

ѕігоке-міаёһ: 32; 

Ѕёгоке-Ӣаѕһаггау: 38 100; /* для 38% */ 
} 


Обратите внимание, как легко теперь поменять процентное значение. Но, 
конечно, даже после такого упрощения нам не хочется повторять всю эту 
ЅҰС-разметку для каждой секторной диаграммы. Настало время обратиться 
за помощью к ]ауазст!ре и привнести в решение немного автоматизации. Мы 
напишем небольшой сценарий, который будет брать простую НТМТ-разметку, 
подобную следующей... 


НТМЕ 


<аіу с1аз5="р1е">20%< /а1\> 
<аіу с1аз5="р1е">60%< /а1\> 


„.и добавлять строковый ЗУС внутри каждого элемента .ріе со всеми необхо- 
димыми элементами и атрибутами. Кроме того, он будет добавлять элемент 
<+11е> для обеспечения доступности, чтобы программы чтения экрана также 
могли понимать, какое процентное значение отображается на каждой диаграмме. 
Готовый сценарий будет таким: 
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$ ('.ріе').ҒогЕасһ(Ғипсёіоп(ріе) { 
уаг р = рагѕеЕ1оаї(ріе .ехЕСоп+епі); 
уаг № = "Пер: //ммм.м3 .ог5/2000/5\5"; 
уаг ѕүр = адоситеп* . сгеаёеЕ1етепМ№5 (№5, "5\8"); 
уаг с1гс1е = аоситеп* . сгеаеЕ1етет №5 (№, "с1гс1е"); 
уаг +1{1е = адоситеп* . сгеафеЕ1етепт№$ (№5, "{11е"); 
с1гс1е. зе: АЕЕг1ие( "г", 16); 
с1гс1е. зе: АЕЕг1иее("сх", 16); 
сігс1е.ѕе+Аёгіри+е("су", 16); 
с1гсТе. зе АЕЕГТЬи{е ( "5&гоке-да$Паггау", р + " 100"); 
5\в . зе АЕЕг1Бике( "\у1емВох", "Ө 0 32 32"); 
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{11е.ехЕСопфепе = ріе.ЕёехСоп+еп+; 


ріе.ехіСопёепі = 3 
ЅУв.аррепасһі1а(%і+1е); 
5\в . аррепаси11а (с1гс1е); 
ріе.аррепасһі1а(ѕурв); 

}); 


Вот и всё! Не исключено, что вы считаете, что метод с С$$ лучше, потому что 
код проще и выглядит менее инопланетным. Но у метода с ЗУС есть определен- 
ные преимущества, которые решение на чистом С$5 обеспечить не в состоянии: 


О третий цвет добавить очень просто: всего лишь создайте еще один круг 
с обводкой и сместите его обводку с помощью ѕёгоке-даѕћо#Еѕеё. Или же 


БУДУЩЕЕ. 
СЕКТОРНЫЕ ДИАГРАММЫ 


Помните конические градиенты из секрета «Шахматные доски»? Здесь 
их помощь также была бы неоценимой. Все, что нам потребовалось бы для 
создания секторной диаграммы — это круглый элемент с коническим гра- 
диентом, включающим две границы перехода цвета. Например, секторную 
диаграмму для значения 40%, показанную на рис. 3.53, можно было бы 
определить с помощью такого простого кода: 


.ріе { 

міаєһ: 100рх; һеіеһ+: 190рх; 

Богаег-гад1и$: 50%; 

Баскёгоипа: соп1с-вгад1еп* (#655 40%, уе110оиргееп Ө); 


} 


Помимо этого, после того как будет повсеместно реализована обновленная 
функция аЕЕг(), определенная в С$$ Маіиеѕ 1еме! З (И(р://м3.огд/ТВ/ 
с553-уаіиеѕ/#айг-поѓайоп), мы сможем контролировать процентное значение 
с помощью простого атрибута НТМЕ: 


раскегоипӣа: соп1с-вга@д1еп* (#655 аёг(да+а-уа1ие %), 
уе11омргееп 0); 


Это также невероятно упрощает задачу добавления третьего цвета. На- 
пример, для создания секторной диаграммы, аналогичной той, которая 
отображается наверху этого поля, мы бы могли всего лишь добавить еще 
две границы перехода цвета: 


раскегоипӣа: соп1с-вга@1еп* (деерр1пКкК 20%, #63 Ө, #63 30%, 
уе11омргееп 0); 
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прибавьте его длину штриха к длине штриха предыдущего круга (находя- 
щегося под ним). А как вы представляете себе добавление третьего цвета на 
секторные диаграммы в первом решении? 


О не приходится задумываться о проблемах с печатью страницы, так как 
элементы 5ҮС считаются содержимым и печатаются точно так же, как эле- 
менты <іте>. Первое решение зависит от определения фона, и, следовательно, 
распечатать такую диаграмму невозможно; 


О мы можем менять цвета с помощью строковых стилей, что означает, что 
они поддаются легкой настройке посредством сценариев (например, могут 
учитывать значения, введенные пользователем). Первое решение полагается 
на псевдоэлементы, которые не поддерживают строковые стили (кроме как 
через наследование), что не всегда удобно. 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесгеѕ.іо/ріе-ѕ%9 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 

С55 Тгапѕѓогтѕ: һір://%3.ого/ТК/с55-гапѕҒогтѕ 

С55 Ітаде Маіиеѕ: Һр: //у3.огд/ТВ/с55-ітадеѕ 

С55 Васкдгоипаѕ & Вогаегѕ: һір://\3.ого/ТВ/с55-раскдгоипаѕ 
ЅсаіаЫе Месіог Сгарһісѕ: ИИр://м/3.ога/ТВ/5\/С 

С55 Ітаде Маіиеѕ 1еме! 4: Һір://%3.0г9/Т6/с554-ітадеѕ 


Визуальные 


эффекты 





4. 


1 = Односторонние тени 


Проблема 


Один из наиболее часто задаваемых вопросов относительно свойства Бох -ѕһайом, 
которые я получаю на веб-сайтах с вопросами и ответами, — как создать тень 
только с одной стороны (или, реже, только с двух). Быстрый поиск по И&р:// 
Ѕіаскоуегїоу.сот возвращает около тысячи результатов по данному запросу. 
И ничего удивительного, ведь отображение тени только с одной стороны создает 
более утонченный, но настолько же реалистичный эффект. Часто потерявшие 
надежду разработчики даже отправляют сообщения в список рассылки рабо- 
чей группы С$5, запрашивая создание новых свойств вроде Бох-5зНадои-Бо от, 
которые могли бы обеспечить такой результат. Однако подобные эффекты уже 
возможны при умном использовании старого доброго свойства Бох-5Падом, 
которое мы все знаем и любим. 


Тень с одной стороны 


Большинство разработчиков используют Бох-$Падом с тремя числовыми значе- 
ниями и цветом, например, так: 


Бох-ѕһайом: 2рх Зрх 4рх гера(0,0,0,.5); 


Следующая последовательность шагов хорошо (хотя и не совсем точно с тех- 
нической точки зрения) описывает процесс создания такой тени (рис. 4.1): 


Рис. 4.1. Пример ментальной модели визуализации Бох-зВадо\м 


15. Односторонние тени 


1. Рисуется прямоугольник цвета грба(@,0,0,.5) 
с теми же габаритными размерами и в той же 
позиции, что и наш элемент. 


2. Он смещается на 2рх вправо и на зрх вниз. 


3. Он размывается на 4рх с помощью алгоритма 
размытия Гаусса (или схожего). По сути, это 
означает, что цветовой переход по краям тени 
между цветом тени и полной прозрачностью 
будет приблизительно в два раза больше радиуса 
размытия (в нашем примере это 8рх). 


4. Размытый прямоугольник затем обрезается 
по контуру пересечения с нашим исходным 
элементом для создания впечатления, что он 
находится позади него. Это немного отличается 
от того, как большинство разработчиков визуа- 
лизируют тени в уме (размытый прямоугольник 
под элементом). Однако в некоторых сценариях 
использования важно понимать, что никакая тень 
под элементом не рисуется. Например, если мы 
зададим для элемента полупрозрачный фон, то 
тени внизу мы не увидим. В этом отличие такой 
тени от +ех*-5Надом, которая не обрезается по 
контуру текста. 


Использование радиуса размытия, равного 4рх, оз- 
начает, что габаритные размеры нашей тени прибли- 
зительно на 4рх больше габаритных размеров эле- 
мента, поэтому часть тени будет выглядывать со всех 
сторон элемента. Мы могли бы установить другие 
значения сдвига, увеличив их как минимум на 4рх, 
чтобы спрятать тень сверху и слева. Но в результате 
у нас получится слишком уж бросающаяся в глаза 
тень, а это выглядит непривлекательно (рис. 4.2). 
Кроме того, даже если бы это нас не беспокоило, 
изначально мы все же хотели получить тень только 
с одной стороны, помните? 


Решение предлагает нам менее известный четвертый 
числовой параметр, который указывается после 
радиуса размытия и носит название радиуса раз- 
мазывания. Радиус размазывания увеличивает или 
(если он меньше нуля) уменьшает размер тени на 
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Если не указано иное, гово- 
ря о габаритных размерах 
элемента, мы имеем в виду 
габаритные размеры его поля 
рамки, а не его ширину и вы- 
соту, указанные в С55-коде. 


Точнее, мы увидим тень 
шириной 1рх наверху 

(Арх - Зрх), шириной 2рх 
слева (4рх - 2рх), шириной 
брх справа (4рх + 2рх) и ши- 
риной 7рх внизу (4рх + Зрх). 
На практике она будет 
казаться меньше, так как 
цветовые переходы по краям 
нелинейные — аналогично 
градиентам. 





Рис. 4.2. Попытка спрятать 
тень наверху и слева с по- 
мощью сдвигов, равных по 
величине радиусу размытия 
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указанное вами значение. Например, радиус разма- 
зывания, равный -5рх, уменьшает ширину и высоту 
тени на 10рх (по 5рх с каждой стороны). 


Отсюда логически вытекает, что если мы применим 
отрицательный радиус размазывания, абсолютное 
значение которого совпадает с радиусом размы- 





Рис. 4.3. Тень Бох-<Надом тия, то тень получит габаритные размеры, точно 
только у нижней стороны совпадающие с габаритными размерами элемента, 
элемента для которого она определена. И если мы не будем 


двигать ее с помощью атрибутов смещения (первые 
два значения), то эту тень совершенно не будет видно. Следовательно, положи- 
тельное значение смещения по вертикали позволит нам увидеть тень у нижней 
кромки элемента, но не вдоль остальных сторон — как раз тот эффект, которого 
мы пытались достичь: 


рох-ѕһайом: Ө 5рх 4рх -4рх Б1аск; 


Результат вы можете видеть на рис. 4.3. 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.сз55есге..ю/5Надом-опе-х1ае 


Тень вдоль двух соседних сторон 


Еще один часто задаваемый вопрос касается создания тени с двух сторон эле- 
мента. Если это соседние стороны (например, правая и нижняя), то все просто: 
можно либо удовлетвориться эффектом, аналогичным показанному на рис. 4.2, 
либо воспользоваться вариантом трюка из предыдущего раздела, но с некото- 
рыми отличиями: 


О сжимая тень, мы не должны пытаться убрать размытие с обеих сторон — 
только с одной. Следовательно, для радиуса размазывания необходимо 
указать значение, не противоположное радиусу размытия, а равное лишь 
его половине (с противоположным знаком); 


О нам нужны оба смещения, так как тень необходимо сдвинуть и по горизон- 
тали, и по вертикали. Значения смещения должны быть больше или равны 
радиусу размытия, поскольку вдоль остальных двух сторон тень должна 
быть полностью спрятана. 


Например, вот что нужно для создания черной (цвета 51аск) тени шириной брх 
вдоль правой и нижней сторон элемента: 


15. Односторонние тени 


рох-ѕһайом: Зрх Зрх 6рх -Зрх Б1аск; 


Результат показан на рис. 4.4. 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.с555есге{.10/$Падом-2-$54е$ 


Тень вдоль двух противоположных 
сторон 


Ситуация становится еще запутаннее, когда у нас 
возникает необходимость создать тени с двух про- 
тивоположных сторон, например слева и справа. Так 
как радиус размазывания применяется одинаково ко 
всем сторонам (то есть невозможно указать, что мы 
хотим увеличить тень по горизонтали, но сжать по 
вертикали), единственный способ решить задачу — 
использовать две тени, по одной с каждой стороны. 
В остальном это тот же трюк, что и рассмотренный 
выше в секрете «Тень с одной стороны», только 
примененный дважды: 


рох-ѕһайом: 5рх @ 5рх -5рх БТаск, 
-5рх @ 5рх -5рх Б1аск; 


Результат вы можете видеть на рис. 4.5. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/ѕһааом-орроѕіќе-ѕійеѕ 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
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Рис. 4.4. Тень Бох-ѕћааоу 
только вдоль двух соседних 
сторон 


В рабочей группе С55 ведутся 
обсуждения относительно 
того, стоит ли в будущем раз- 
решить указывать отдельные 
значения радиуса размазы- 
вания по горизонтали и по 
вертикали. Это упростило бы 
решение данной задачи. 





Рис. 4.5. Тень Бох-ѕһааоу 
вдоль двух противоположных 
сторон 


С55 Васкагоцпаѕ & Вогаегѕ: ћір://\3.ого/ТВ/с55-раскдгоипаѕ 


Падающие тени 
неправильной формы 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Знание свойства бох-ѕһайом 


Проблема 


Свойство Бох -ѕһайом прекрасно работает, когда нам требуется тень, отбрасываемая 
прямоугольником или любой другой фигурой, которую можно создать с помощью 
рогдег-гадіиѕ (несколько примеров вы найдете в секрете «Гибкие эллипсы»). 
Однако от него гораздо меньше пользы, когда мы работаем с псевдоэлементами 
или другими полупрозрачными вариантами декорирования, потому что Бох-$Надом 
бессовестно игнорирует прозрачность. Приведу несколько примеров: 


О полупрозрачные изображения, фоновые изображения и рамки, созданные 
с применением богӣег-ітаве (например, винтажная рама с позолотой); 


О штрихпунктирные рамки, рамки с точечным пунктиром и полупрозрачные 
рамки без фона (или со значением баскегоипа-с1ір, отличным от богаег-бох); 


О облачко с текстом, указатель для которого создан с помощью псевдоэлемента; 


О скошенные углы, аналогичные тем, которые мы учились делать в секрете 
<Срезанные углы»; 


О большинство эффектов загнутого уголка, включая описанный далее в этой 
главе; 





Ч контуры, создаваемые с помощью с1ір-раїћ, например ромбовидные изо- 
бражения из секрета «Изображения в форме ромба». 
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Поцеа 


Богаег 





они ннни 


Рис. 4.6. Элементы, стилизованные с помощью С55, с которыми использование бох-ѕћайоуу 
теряет всякий смысл (здесь применяется значение свойства Бох-ѕћайоу, равное 2рх 2рх 10рх 
гдБа(0,0,0,.5)) 


Результаты тщетных попыток применить бох- ѕһайом в некоторых из перечис- 
ленных ситуаций показаны на рис. 4.6. Существует ли решение для подобных 
случаев или нам придется вообще отказаться от использования теней? 


Решение 

Спецификация ЕЩег ЕЌесеѕ (ПЕр://мЗ.ого/ТВ/ЯКег-еНес($) пред- 

лагает решение данной проблемы в форме нового свойства =>, 
Ғі1+ег, позаимствованного из формата ЗУС. Однако несмотря ее 


е 
на то что фильтры С55 — это, по сути, те же самые фильтры 


ЅҰС, для их использования никакого знания $УС не требу- Ограниченная 
ется. Они определяются посредством нескольких удобных поддержка 
функций, таких как 61иг(), вгауѕса1е() и — барабанная дробь — 

гор-зПааом()! Можно даже составить последовательность из 

нескольких фильтров, если того требует ситуация, разделив 

их пробелами, например так: 


Ғі1+ег: Б1иг() егауѕса1е() ағгор-ѕһайом(); 


Фильтр ӣгор-ѕһайом() принимает те же параметры, что и базовое свойство 
рох-ѕһадом, то есть без радиуса размазывания, без ключевого слова іпѕеё, без 
разделенных запятыми определений нескольких теней. Например, вместо: 


рох-ѕһайом: 2рх 2рх 10рх грра(0,0,0,.5); 
мы бы написали: 
Ғі1+ег: агор-ѕһайом(2рх 2рх 10рх грба(0,0,0,.5)); 


Результат применения этого фильтра ӣгор-ѕһћайом() к элементам с рис. 4.6 де- 
монстрируется на рис. 4.7. 
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Поцеа 
Богаег 





Рис. 4.7. Результат использования фильтра гор-ѕћааом() с элементами с рис. 4.6 


Поскольку алгоритмы Лучше всего в фильтрах С$5 то, что они обеспечи- 
(Г) размытия могут быть вают изящные резервные решения: когда фильтры 
разными, вам может не поддерживаются, ничего не ломается, просто ни- 
ПОЕТ отВЕвУЛИрО- какой эффект не применяется. Вы можете добиться 
вать значение размытия в за- РА 
И ат тотресне тей чуть лучшей поддержки браузерами, используя 
в конкретной задаче. заодно фильтр ЗУС, если перед вами стоит задача 
любыми способами заставить этот эффект работать 
в как можно большем количестве браузеров. Соот- 
ветствующие фильтры 5УС для каждой функции 
фильтрации вы найдете в спецификации Е\№ег ЕЁес($ (Н&р://мЗ.огд/ТВ/ЯКег- 
еҝќесіѕ). Можно одновременно использовать и фильтр ЗУС, и упрощенный аналог 
на С$5, позволяя каскадным стилям самим определять победителя: 


Ғі1+ег: иг1(агор-ѕһайом. зу #Агор-Падом) ; 
Ғі1+ег: дгор-Надом(2рх 2рх 10рх геба(0,0,0,.5)); 


К сожалению, если ЗУС-фильтр содержится в отдельном файле, то он не под- 
дается такой же простой настройке, как приятная, удобная в использовании 
функция прямо в С55-коде, а строковая функция, в свою очередь, захламляет 
код. В файле параметры фиксированы, и иметь несколько файлов на случай, 
если нам понадобятся слегка различающиеся тени, непрактично. Мы могли бы 
использовать О ВТ данных (что заодно сэкономило бы нам несколько запро- 
сов НТТР), но они также приводят к увеличению размера файла. Поскольку 
фильтр $УС используется для обеспечения обходного решения, имеет смысл 
использовать один или два варианта, даже для немного отличающихся филь- 
тров агор-ѕһайом(). 


Кроме того, не следует забывать, что отбрасывать тень будет любая непро- 
зрачная область, независимо от того, каким элементом она представлена, — 
даже текст (на прозрачном фоне), как вы уже видели на рис. 4.7. Возможно, 
вы думаете, что отменить этот эффект можно с помощью +ехі -ѕһайом: попе;, НО 
+ех+-ѕһадом — это отдельное свойство, не способное компенсировать влияние 
фильтра ӣгор-ѕһайом() на текст. А если вы используете ќехї -ѕ$һайом для создания 
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настоящей тени текста, то благодаря фильтру дгор- 
ѕһадом() у этой тени также появится своя тень, то 
есть вы создадите тень тени! Взгляните на следу- 
ющий пример С$$-кода (и простите за безвкусный 
результат — я всего лишь пытаюсь продемонстри- 
ровать всю дикость этой проблемы): 


со1ог: еерріпк; 

Богаег: 2рх $0114; 

фех{-5Падом: .1ет .2ет уе11ом; 

Ғі1+ег: агор-ѕһадом( .Ө5ет .05ет .1ет ргау); 


Пример визуализации этого кода вы видите нарис. 4.8: 
здесь показана как тень ёех+ - °Вадом, так и отбрасы- 
ваемая ею тень агор- ѕһайом(). 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/агор-ѕһаао\м 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
Рег Е#есіѕ: Вр://м/3.огд/ТВ/ЯЖег-еНес5 


Үо дам д, І 
Веаха о ке 
звадомз,.. 


Рис. 4.8. Тени їехі-ѕһайоу 
также отбрасывают тень 
сквозь фильтр агор-5Падом\(() 


1 7 Создание цветового тона 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Цветовая модель НУ, свойство баскргоипӣ- ѕіге 


Проблема 


Добавление цветового тона к изображению в оттенках серого (или к изобра- 
жению, преобразованному в оттенки серого) — популярный и элегантный 
способ придания визуального единообразия группе фотографий, выполненных 
в совершенно непохожих стилях. Часто этот эффект применяется статически 
и убирается по событию :һоуег и/или при других вариантах взаимодействия 
с изображением. 


Традиционно мы создаем две версии изображения в графическом редакторе 
и добавляем немного простого С$$-кода, задача которого — подменять одну 
версию другой. Этот подход работает, но он раздувает исходный код и требует 
дополнительных НТТР-запросов, а сопровождать такой веб-сайт — это насто- 
ящая головная боль. Представьте, что было принято решение изменить цвет, 
использующийся для создания этого эффекта. Вам придется перебрать все 
изображения и создать для каждого новую монохромную версию! 


Другие подходы включают наложение полупрозрачного цвета поверх изобра- 
жения или изменение степени непрозрачности изображения и наложение его 
на подложку сплошного цвета. Однако это не настоящий тон: в таком решении 
не только цвета изображения не преобразуются в оттенки целевого цвета, но 
и существенно снижается контрастность. 
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@1еауегои @э1ибБотейа @раїгіскһатапп 


Рис. 4.9. На веб-сайте С55Сопѓ 2014 этот эффект используется для оформления фотографий 
лекторов. Полноцветное изображение показывается при наведении указателя мыши и переводе 
фокуса на выбранный элемент 


Также существуют сценарии, превращающие изображения в элемент <«сапуаѕ> 
и применяющие тон средствами ЈауаЅсгірѓ. При этом действительно получает- 
ся реальное тонированное изображение, но решение работает очень медленно 
и накладывает множество ограничений. 


Согласитесь, было бы намного проще и удобнее применять цветовые тона к изо- 
бражениям прямо в коде С$5? 


Решение на основе фильтров 


Так как не существует единой функции фильтрации, раз- 
работанной специально для данного эффекта, нам придет- 
ся проявить фантазию и скомбинировать несколько филь- 
тров. 





Первым мы применим фильтр ѕеріа(), придающий изобра- Ограниченная 
жению ненасыщенный оранжево-желтый оттенок, при ко- поддержка 
тором тон большинства пикселов находится на уровне 35—40 

(рис. 4.10). Если нам требовался именно этот цвет, то работа 

завершена. Но в большинстве случаев мы ставим себе целью 
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Рис. 4.10. Наверху: исходное 
изображение. Внизу: изобра- 
жение после применения 


фильтра ѕеріа() 





Рис. 4.11. Наше изображение 
после добавления фильтра 


ѕаёџгаїе() 





Рис. 4.12. Наше изображение 
после добавления третьего 


фильтра, һие-гоќаќе() 


добиться несколько иного результата. Если жела- 
емый цвет насыщеннее, то увеличить насыщен- 
ность каждого пиксела можно с помощью фильтра 
ѕаќигаїе(). Предположим, что мы хотим придать 
изображению тон һ51(335, 100%, 50%). Насыщенность 
нужно повысить совсем немного, поэтому мы ис- 
пользуем параметр 4. Точное значение зависит от 
каждого конкретного случая, поэтому ориентируй- 
тесь на визуальный результат. Как демонстрирует 
рис. 4.11, этот комбинированный фильтр придает 
нашему изображению теплый золотой тон. 


Как бы мило ни выглядело наше изображение, мы 
не планировали делать его ярким оранжево-желтым. 
Нам требуется глубокий ярко-розовый. Следова- 
тельно, необходимо также применить фильтр пие- 
гоаїе() для смещения тона каждого пиксела на 
указанный угол в градусах. Чтобы создать тон 335 
из тона, приблизительно равного 40, необходимо 
добавить примерно 295 (335 – 40): 


+114ег: ѕеріа() зафигафе(4) Пче-гофа*е(295аез); 


Итак, мы придали тон нашему изображению, и гото- 
вый результат вы можете увидеть на рис. 4.12. Если 
этот эффект должен переключаться по наведению 
указателя мыши ( :һоуег) или в зависимости от дру- 
гих состояний, то к нему можно также применить 
переходы С55: 


іте { 

{гап$1410п: .55 Ғі1#ег; 

Ғі1+ег: ѕеріа() зафигафе(4) һие- 
гоба+е (295аер); 


} 


118 : Воуег, 
1и8:Фоси$ { 

Ғі1+ег: попе; 
} 


ПОПРОБУЙТЕ САМИ! 


НЕр://р!ау.с555есге.ю/со!ог-Ит{-ЯКег 
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Решение на основе режимов смешивания 


Решение с фильтрами работает, но вы, вероятно, заметили, 
что результат немного отличается от того, который мы бы ры’ `9 


получили в графическом редакторе. Хотя мы пытаемся для ее 
Гаі 


создания тона использовать очень яркий цвет, результат все 
равно выглядит немного полинявшим. Если мы попытаемся 
увеличить значение параметра фильтра ѕаќигаїе(), то полу- 
чим другой, чрезмерно стилизованный эффект. К счастью, 
существует гораздо лучший подход: режимы смешивания! 





Ограниченная 
поддержка 


Если вам когда-либо доводилось использовать гра- 
фические редакторы, например АЯоБе Рћоѓоѕћор, то, 
вероятно, вы уже знакомы с режимами смешивания. 
Когда два элемента накладываются друг на друга, 
режимы смешивания управляют тем, как цвета 
верхнего элемента смешиваются с цветами всего, 
что находится под ним. Что касается придания цве- 
тового тона изображениям, для этого используется 
режим смешивания 1итіпоѕі+у. Режим смешивания 
1џпіпоѕі+у сохраняет НЗГ-светлоту верхнего эле- 
мента, в то же время учитывая тон и насыщенность 
его подложки. Если подложкой служит наш цвет, 
а элемент с этим режимом смешивания применяется 
к нашему изображению, то не означает ли это, чтомы Рис. 4.13. Сравнение 


нашли ключ к созданию требуемого цветового тона? Метода на основе фильтров 
(наверху) и метода, 


Для применения режима смешивания к элемен- основанного на режимах 

ту служат два свойства: тіх-Ь1епа-тоде применя- смешивания (внизу) 

ет режимы смешивания к элементам целиком, 

а баскегоипа-б1епа-тоае применяет режимы сме- 

шивания к каждому фоновому слою в отдельности. Из этого следует, что 
использовать данный метод на изображении можно двумя способами, каждый 
из которых, к сожалению, не идеален: 





О обернуть наше изображение в контейнер с желаемым фоновым цветом; 





О использовать <аіу> вместо изображения, выбрав изображение, которому 
придается тон, в свойстве браскегоипа-ітаре и добавив внизу второй фоновый 
слой с желаемым цветом. 


В зависимости от конкретного варианта использования можно прибегнуть 
к любому из этих подходов. Например, если нам нужно применить эффект 
к элементу <іте>, то его необходимо обернуть другим элементом. Однако если 
у нас уже есть другой элемент, такой как ‹а>, то можно использовать его: 
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НТМЕ 


<а һгеғ= "#ѕотеёһіпв" > 
<іте ѕгс="+ірег.јре" а1+="Камггп!" /> 
</а> 


И тогда для применения эффекта понадобятся только два объявления: 


а { 
раскргоипа: һ51(335, 100%, 50%); 
} 
іте { 
тіх-Б1епа-тойе: 1Іитіпоѕі+у; 
} 


Так же как и фильтры С$5, режимы смешивания обеспечивают изящные обход- 
ные пути: если они не поддерживаются, то никакие эффекты не применяются 
и изображение выводится в исходном виде. 


Важно помнить, что в то время как фильтры поддерживают анимацию, режимы 
смешивания анимировать невозможно. Мы уже знаем, как создать анимацион- 
ный эффект плавного перевода изображения в монохромный режим с помощью 
простого перехода С$5 на свойстве #і1+ег. Реализовать это для режимов смеши- 
вания не получится. Но не беспокойтесь, это не означает, что вопрос анимации 
полностью отпадает. Просто нам придется применить нестандартное решение. 


Как уже говорилось выше, міх-б1епа-тоде смешивает элемент целиком со всем 
тем, что находится под ним. Следовательно, если мы применим режим сме- 
шивания 1ит1по$1{у посредством этого свойства, то изображение всегда будет 
смешиваться с чем-то. В то же время Басквгоипа-61епа-тоде смешивает каждый 
слой фонового изображения со слоями, находящимися ниже, и совершенно не 
в курсе происходящего за пределами элемента. Что произойдет, если мы созда- 
дим только одно фоновое изображение и прозрачный (+гапзрагеп®) фоновый 
цвет? Правильно: никакого смешивания не будет! 


Воспользуемся этим наблюдением и применим свойство Басквгоипа-61епд-тоае 
с нашим эффектом. НТМГ-код немного изменится: 


НТМЕ 
<аім с1аз$5="{1п%еа-1таве" 

ѕ+у1е= "баскргоипа-ітаве:иг1 (+івег.јрв) "> 
</41м> 


Теперь осталось лишь применить стилизацию С55 к этому единственному ‹а1м>, 
ведь данная техника не требует дополнительных элементов: 
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.Е1итед-1таве { 
итаЕВ: 640рх; һеівһё: 440рх; 
Баскёгоипа-$12е: сохег; 
Баскёгоипа-со1ог: һ51(335, 100%, 50%); 
баскегоипа-Б1епа-тоае: Іитіпоѕі+у; 
їгапѕіёіоп: .55 баскегоипа-со1ог; 


} 


. Е1птед-1таве :һоуег { 
раскегоипа-со1ог: Єгапѕрагепт; 


} 


Однако, как упоминалось выше, ни одна из двух техник не идеальна. Главные 
проблемы, возникающие при использовании данного подхода: 


О габаритные размеры изображения необходимо жестко фиксировать в С$$- 
коде; 





О семантически это не изображение, и программы чтения экрана не будут 
распознавать в нем изображение. 


Как часто бывает в жизни, для этой задачи не существует безупречного решения, 
но в данном разделе мы изучили три разных пути создания желаемого эффекта, 
каждый со своими преимуществами и недостатками. Какой вы выберете — за- 
висит от конкретных требований вашего проекта. 


ПОПРОБУЙТЕ САМИ! 


Бр: //р1ау.с$55есге(5.10/соог-ЕтЕ 


Спасибо Дадли Стори (Оиаіеу Ѕїогеу, һір://аетоѕіһепеѕ.іпѓо) за трюк 
с анимацией для режимов смешивания (ћір://аетоѕћепеѕ.іпѓо/6іо9/888/ 
Сгеаїе-Мопосһготайіс-СоІог-Тіпеа-Ітадеѕ-М/їһ-С55-Ыіепа). 


Благодарности 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 

Рег ЕЯес(5: Вр://м/З.огд/ТВ/ЯЖег-еНес5 

Сотро$ та апа Вепато: НЁр://\м3.ога/ТВ/сотро$ та 
С55 Тгапѕііопѕ: ИЁр://\м/З.ога/ТВ/с$$-{гап$оп$ 
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ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 
Цвета ВСВА/НЅІА 


Проблема 


Здесь мы используем термин Одним из первых вариантов использования полу- 
ОО длахосааанения прозрачных цветов было создание с их помощью 
м фона поверх фотографий или других насыщенных 
находится под элементом 
и которая проглядывает деталями подложек, для того чтобы уменьшить кон- 
сквозь его полупрозрачный траст и улучшить читабельность текста. Результат 
фон. получается довольно впечатляющим, но текст все 
равно бывает сложно прочитать, особенно если ис- 
пользуются очень слабонасыщенные цвета и/или шумные подложки. Например, 
взгляните на рис. 4.14, на котором у главного элемента имеется полупрозрачный 
белый фон. Разметка выглядит так: 


НТМЕ 
<та1п> 
<Б1Лоскачцо*е> 
"Тһе оп1у мау Фо реї гіа о+ а фетрае1оп[...]" 
<Фоофег>— 
<сіїе» 
Оѕсаг Мі1ае, 
Тһе Р1сфиге о+ рогіап бгау 
</сіїе» 
</Ғоотег»> 
</Б1оскацо*е> 


</та1п> 
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А С55-код выглядит так (для краткости все незначительные детали опущены): 


роду { 
БасКёгоипа: иг1("{15ег.)рё") 9 / соуег +1хеа; 
} 
таіп { 
Баскёгоипа: 1$1а(0,0%,100%,.3); 
} 





Рис. 4.14. На нашем полупрозрачном белом фоне текст прочитать трудно 


Как вы видите, текст прочитать очень сложно, так как изображение яркое 
и содержит множество деталей, а фоновый цвет непрозрачен только на 25%. 
Разумеется, мы могли бы улучшить читабельность, увеличив параметр альфа- 
канала в определении фонового цвета, но тогда эффект будет не таким инте- 
ресным (рис. 4.15). 


В традиционном печатном дизайне эту проблему часто решают путем размыва- 
ния фрагмента фотографии, находящегося прямо под текстовым контейнером. 
Размытые фоны не такие пгумные, и, следовательно, текст поверх них читается 
намного проще. Поскольку эффект размытия дорогостоящ в терминах вычис- 
лительных ресурсов, в прошлом эту технику невозможно было использовать 
на веб-сайтах и в дизайне пользовательских интерфейсов. Однако графические 
процессоры непрерывно совершенствуются, а аппаратное ускорение становится 
доступным все в большем количестве разнообразных сценариев, поэтому сегодня 
мы сталкиваемся с эффектом размытия в оформлении интерфейсов довольно 
часто. За последние несколько лет нам довелось повстречать эту технику в но- 
вых версиях как М1сгозой \УМп4о\з, так и АррІе 10$ и Мас ОЗ Х (рис. 4.16). 
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“Тће от ау 10 ре! па оралетрайот 15 10 уіеіа о и. 


Ке5151 И, апай уоиг ѕош 2т0:05 51сК ий опогто јот 1ће 
Иттсу И па; рота 10 ие, гой дете јот йа и 
топутоиз [ау вазе тайе топѕіғоиѕ апа ища ри.” 
— Озсаг Ме, Тһе Рсихе оғ опар Стау 





Рис. 4.15. Увеличение значения альфа-канала для фонового цвета решает проблему 
читабельности, но дизайн при этом теряет изюминку 


Ф ман гы П Мое сы бана ные оо че ву те т нне неон аена а Е 





гече /0@ә 


ма по В а Бо 





Рис. 4.16. В последние годы полупрозрачные пользовательские интерфейсы с размытой 
подложкой встречаются все чаще, так как нагрузка на системные ресурсы, которую оказывает 
эффект размытия, перестала быть чрезмерно дорогой (слева — фрагмент интерфейса из Арре 
05 8.1; справа — фрагмент интерфейса из Арре О5 Х Үоѕетіќе) 


В С55 у нас также есть возможность размывать элементы. Для этого исполь- 
зуется фильтр Б1иг(), по сути, представляющий собой аппаратно ускоренную 
версию соответствующего примитива фильтрации из ЗУС, который всегда был 
доступен в этом формате для размывания 5УС-элементов. Однако если мы на- 
прямую применим фильтр Б1иг() в нашем примере, то размытию подвергнется 
весь элемент, что сделает его еще менее читабельным (рис. 4.17). Существует 
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ли способ применить эффект размытия только к подложке элемента (то есть 
к части фона, находящейся позади нашего элемента)? 





Рис. 4.17. Применение фильтра Ычг() к самому элементу только ухудшает ситуацию 


Решение 


При условии, что для нашего элемента определено Это возможно и с нефиксиро- 
свойство Басквгоцпа-аёёасһтепё со значением +1хед, ванными фонами, но с менее 
исправить ситуацию можно, проявив определенную ИЗЯЩНЫМ решением. 
изобретательность. Поскольку мы не можем при- 

менить размытие к самому элементу, мы применим его к псевдоэлементу, рас- 
положенному позади элемента, фон которого полностью совпадает с фоном, 
определенным для <Боду>. 


Для начала добавим псевдоэлемент с абсолютным позиционированием и ну- 
левыми смещениями, полностью покрывающий элемент <та1п>: 


таіп { 
роѕіїіоп: ге1аїіхе; 
/* [Остальные стили] */ 


} 


таіп: : Бефоге { 
сопфеп*: ''; 
роѕіёіоп: абзо1и*е; 
Фор: 0; гірһё: 0; Боффот: 0; Те: 9; 
Баскёгоипа: геба(255,0,0,.5); /* в целях отладки */ 
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Будьте осторожны, исполь- 
зуя отрицательные значения 
2-іпаех для перемещения 
дочернего элемента под 
родительский: если этот ро- 
дительский элемент вложен 

в другие элементы, для кото- 
рых определены фоны, то они 
также окажутся поверх наше- 
го дочернего элемента. 


Мы также создали полупрозрачный красный фон 
(цвет геа), для того чтобы видеть, что мы делаем, 
в противном случае отладка стилей для прозрачного 
(и, следовательно, невидимого) элемента становится 
слишком сложным делом. Как вы видите на рис. 4.18, 
в настоящий момент наш псевдоэлемент находится 
поверх содержимого, закрывая его. Это можно ис- 
править, добавив 2-іпаех: -1; (рис. 4.20). 





Рис. 4.19. Мы исправили проблему с затуханием размытия по краям, но теперь размывается 
часть изображения за пределами элемента 
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Теперь настало время заменить полупрозрачный Почему бы просто не исполь- 
Е зовать баскегоипа: іпһегіЄ 
красный фон гим фоном, в точности совпада- 

р фон дру . ф ! д на таіп: :Бефоге? Потому что 
ющим с подложкой. Для этого можно либо скопи- в этом случае наследование 
ровать фон из элемента <Боау>, либо выделить его будет выполнено от таїп, 

в собственное правило. Можно ли теперь применять ане от боау, и псевдоэлемент 


9 Е | также получит полупрозрач- 
размытие? Давайте попробуем: И ел фов 


роду, таіп: : Бефоге { 
браскегоипа: иг1("{15ег.)рё") 9 / соуег +1хеа; 


$ 
таіп { 

ро$11оп: ге1аїіхе; 

Баскёгоипа: һѕ1а(0,07%,100%,.3); 
} 


таіп: : Бефоге { 
сопфепт*: ''; 
ро$11оп: арѕо1и+е; 
Фор: 0; гірһё: 0; Боот: 0; Те: 9; 
Ғі1+ег: 61иг(20рх); 


Как видно на рис. 4.21, мы почти достигли цели. Эффект размытия превосходно 
смотрится в центре, но чем ближе к краям, тем размытие слабее. Так происходит 
потому, что размывающий фильтр уменьшает область, покрытую сплошным 





Рис. 4.20. С помощью 7-таех: -1; мы поставили псевдоэлемент позади его 
родительского элемента 
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Рис. 4.21. Размытие псевдоэлемента работает почти идеально, но все же эффект 
ослабевает по краям, делая иллюзию матированного стекла менее достоверной 


“Тће опіу гоау іо ве! та ора іетріайоп 15 о у 40 и. 
Кеѕі5і и, апа уоит ѕоиі атоо 51сК 10Ић (опотв јот ће 
Ііпох И ћаѕ оплат 10 ие}, гой 4еяате јот гоћаі 5 


топз{тоиз Іагоѕ ћаге тае топѕітоиѕ апа ища И.” 


Оѕсаг Мае, ТҺе Рісішге оЁ Оопап Стау 





Рис. 4.22. Красный (гей) фон помогает разобраться в происходящем 


цветом, на значение, равное радиусу размытия. Снова применив красный (геа) 
фон кнашему псевдоэлементу, мы сразу же поймем, в чем причина (рис. 4.22). 


Чтобы обойти это ограничение, сделаем псевдоэлемент по меньшей мере на 
(радиус размытия) больше габаритных размеров его контейнера. Для этого 
установим размер полей, равный - или еще меньше, чтобы гарантированно 
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добиться нужного результата, так как в разных браузерах могут применяться 
разные алгоритмы размытия. Как демонстрирует рис. 4.19, это решает про- 
блему с ослаблением размытия по краям, но теперь размытие наблюдается за 
пределами нашего контейнера, что делает его похожим на смазанное пятно 
вместо матированного стекла. К. счастью, это легко поправить: мы всего лишь 
применим о\ег+1ои: п1а4еп; к элементу таіп, обрезав, таким образом, лишнее 
размытие. Финальная версия кода показана далее, а результат вы можете уви- 
деть на рис. 4.23: 


роду, таіп: : Бефоге { 
браскегоипа: иг1("ёівег.јре") 9 / соуег Ғіхеа; 


} 

таіп { 
роѕіёіоп: ге1аїіхе; 
Баскёгоипа: һћѕ1а(0,07%,100%,.3); 
омег1ом: һідадеп; 

} 


таіп: :реҒоге { 
сопёепі: ''; 
роѕіёіоп: арѕо1и+е; 
Фор: 0; гірһё: 0; Боот: 0; Те: 9; 
Ғі1+ег: 61иг(20рх); 
тагріп: -3@рх; 





Рис. 4.23. Финальный результат 
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Обратите внимание, насколько более читабельной стала наша страница и как 
элегантно она теперь смотрится. Вопрос только в том, можно ли считать ре- 
зервное решение для данного эффекта изящным выходом из ситуации. Если 
фильтры не поддерживаются, то мы получаем результат, который видели в на- 
чале (рис. 4.14). Для того чтобы сделать резервное решение более читабельным, 
можно увеличить степень непрозрачности фонового цвета. 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.с555есге10/го$е4-91а$$ 





о Эффект загнутого уголка 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Трансформации С55, градиенты С55, секрет «Срезанные углы» 


Проблема 


Стилизация одного угла элемента (обычно верхнего правого или нижнего 
правого) так, чтобы он выглядел загнутым, с разной степенью реализма — это 
дизайнерский прием, не теряющий своей популярности вот уже много лет. 


Сегодня в его применении нам помогают несколько решений на чистом С$5$, 
первое из которых было опубликовано еще в 2010 году мастером работы с псев- 
доэлементами Николасом Галлахером (Һр://пісоіаѕдаПадһегсот/риге-сѕѕ-ѓоіаеа- 
согтег-еќесі). Основной путь решения — добавить два треугольника в верхнем 
правом углу: один для представления загнутого уголка страницы и второй — 
закрывающий собой угол главного элемента. Эти треугольники чаще всего 
создаются с помощью проверенного временем трюка с рамкой. 


В свое время эти решения смотрелись весьма впечатляюще, но сегодня мы 
понимаем, насколько они ограниченны. В некоторых ситуациях они попросту 
неприменимы: 


О когда фон, находящийся позади нашего элемента, не залит сплошным цветом, 
а оформлен с использованием узора, текстуры, фотографии, градиента или 
фонового изображения любого другого типа; 


О когда мы хотим загнуть уголок под другим углом, отличным от 45°, или же 
добавить легкое вращение. 
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С55-ТВІСКЅ геећоџѕе” апа уоиг дгеат јоф. 


АЕМАМАС ЅМІРРЕТЅ 


Ра{а!1${$ Ғог Оі #егепї шри{ Туреѕ 


Іѕам ап НТМІЅ даќе прис ће сег ау, мћісһ Һәй Һе бгорбомт аггом оп (һе гід, міс Гуе 
деомтп ассиѕіот (0 сїскіпд (0 геуеаї а саіепдаг баќеріскег іп УКР (0 пообе а але. 


гееһоџѕе 


Туркайу, (ах ок іже (піс: 


еатіпд спапдез імез! 


Кезд Алісе -= 





Ном $УС Ѕһаре МогрИта Могкѕ 


Рис. 4.24. В нескольких ранних версиях дизайна веб-сайта Һір://с5-ігіскѕ.сот загнутые уголки 
использовались для оформления верхнего правого угла полей, содержащих отдельные статьи 
сайта 


Существует ли более гибкое решение для создания загнутых уголков с помощью 
С$$, которое не буксует в подобных случаях? 


Решение для угла 45° 


Для начала создадим элемент со скошенным верхним правым углом, восполь- 
зовавшись для этого решением на основе градиента из секрета «Срезанные 
углы». Следующий код определяет скошенный угол размером 1ет, а графическое 
представление того, что должно получиться, вы видите на рис. 4.25: 


Баскёгоипа: #58а; /* Резервное решение */ 
Баскёгоипа: 
11пеаг-вгад1еп* (-1354её, {гапзрагепе 2ет, #58а Ө); 


Дело наполовину сделано: все, что нам осталось, — 
это добавить чуть более темный треугольник, 
представляющий загнутый уголок страницы. Мы 


«Единственный способ 
избавиться от искушения — 


это поддаться ему». 
Оскар Уайлд, сделаем это с помощью еще одного градиента, а за- 


«Портрет Дориана Грея» тем подгоним его размеры под наши требования 
с помощью Баскргоипа-512е и поместим в верхний 
правый угол. 





Рис. 4.25. Наша отправная 


точка: элемент со срезанным Д уя создания треугольника нам нужен расположен- 
верхним правым углом, 


для создания которого мы ный под углом линейный градиент с двумя грани- 
воспользовались градиенттм цами перехода цвета, встречающимися в середине: 
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Баскёгоипа: 
11пеаг-вгад1еп* (бо Іеғё боі+от, 
{гапзрагеп{ 50%, грба(0,0,0,.4) 0) 
по-гереаї 100% 0 / 2ет 2ет; 


Как выглядит результат, когда присутствует только этот фон, вы видите на 
рис. 4.26. На последнем шаге мы должны объединить эти два фрагмента кода, 
и на этом можно будет закончить, так? Давайте попробуем сделать это, убедив- 
шись, что треугольник, представляющий загнутый уголок, находится поверх 


градиента, создающего срезанный угол: 


Баскёгоипа: #58а; /* Резервное решение */ 
Баскёгоипа: 
Ііпеаг-вгадіепі (бо Іеғё боїі+опт, 
{гапзрагеп{ 50%, грба(0,0,0,.4) 0) 
по-гереа{ 100% Ө / 2ет 2ет, 


1іпеаг-вгадіеп (-135аев, {гапзрагепе 2ет, #58а 0); 


Как подтверждает рис. 4.27, результат не совсем та- 
кой, как ожидалось. Почему же размер не совпадает? 
Ведь высота обоих градиентов равна 2ет! 


Причина заключается в том (как мы уже обсужда- 
ли в секрете «Срезанные углы»), что размер угла, 
равный 2еп, в случае второго градиента относится 
к позиции границы перехода цвета и, следователь- 
но, отмеряется по градиентной линии, то есть по 
диагонали. С другой стороны, 2ет для Басквгоипа- 
$12е — это ширина и высота фоновой плитки, ко- 
торые измеряются соответственно по горизонтали 
и по вертикали. 


Для того чтобы совместить эти два градиента, необ- 
ходимо сделать одно из следующего, в зависимости 
от того, какой размер вы хотите сохранить: 


О чтобы диагональ все так же была равна 2ет, мы 
можем умножить басквгоџпа-ѕіхғе на 12; 





О чтобы сохранить ширину и высоту, равные 2ем, 
можно разделить позицию границы перехода цве- 
та нашего градиента для срезанного угла на `2. 


Так как Басквгоипд-512е повторяется дважды, а боль- 
шинство других измерений в С55 делается не по диа- 
гонали, второй вариант обычно предпочтительнее. 


Рис. 4.26. Наш второй 
градиент для треугольника, 
представляющего загнутый 
уголок, отдельно от всего 
остального. Текст показан 
светло-серым цветом вместо 
белого, для того чтобы вы 
могли видеть его 


«Единственный способ 
избавиться от искушения — 


это поддаться ему». 
Оскар Уайлд, 
«Портрет Дориана Грея» 





Рис. 4.27. Объединение 
двух градиентов не дает 
желаемого результата 
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«Единственный способ 
избавиться от искушения — 


это поддаться ему». 
Оскар Уайлд, 
«Портрет Дориана Грея» 


Рис. 4.28. Наш загнутый 
уголок наконец-то оказыва- 
ется на своем месте, когда 
мы меняем позицию границы 
перехода цвета для синего 
градиента 


Убедитесь, что шири- 
(Г) на забивки по мень- 

шей мере равна вели- 
чине угла, иначе текст будет 
наползать на угол (ведь это 
всего лишь фон), разрушая 
иллюзию загнутого уголка 
страницы. 


«Единственный способ 
избавиться от искушения — 
это поддаться ему». 


Оскар Уайлд, 
«Портрет Дориана Грея» 


Рис. 4.29. Изменение 
угла срезки приводит 
к разрушению эффекта 
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Позиция границы перехода цвета примет значение 
2/12 = 402 = 1,414213562, что мы округлим до 1.5ѕепт: 


Баскёгоипа: #58а; /* Резервное решение */ 
Баскёгоипа: 

11 пеаг-вгад1еп* (бо 1ефЕ бо++опт, 
{гапзрагепе 50%, геба(0,0,0,.4) Ө) 
по-гереаї 100% 0 / 2ет 2ет, 

11 пеаг-вга1еп* (-135аер, 

{гапзрагеп{ 1.5ет, #58а 0); 


Как видно на рис. 4.28, это наконец-то позволяет по- 
лучить приятный глазу, гибкий и минималистичный 
загнутый уголок. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/ғоіаеа-согпег 


Решение для других углов 


В реальности уголки страниц редко загибаются под 
углом 45°. Если нам требуется нечто более реали- 
стичное, то мы могли бы попробовать указать другое 
значение угла, например -1504ев для угла 30°. Но это 
всего лишь изменит угол наклона срезанного угла, 
а треугольник, представляющий загнутую часть стра- 
ницы, останется на своем месте, полностью исказив 
эффект, как показано на рис. 4.29. Однако скорректи- 
ровать размеры этого треугольника не так просто, как 
может показаться. Его размер определяется не углом, 
а шириной и высотой. Как же нам понять, какую ши- 
рину и высоту указать для нужного эффекта? Что ж, 
пришло время — о нет! — тригонометрии! 


В настоящее время код выглядит так: 


Баскёгоипа: #58а; /* Резервное решение */ 
Баскёгоипа: 

11 пеаг-вгад1еп* (бо 1ефЕ бо++опт, 
{гапзрагепе 50%, геба(0,0,0,.4) Ө) 
по-гереаї 100% 0 / 2ет 2ет, 

11 пеаг-вгаа1епт* (-150деғ, 

{гапзрагепе 1.5ет, #58а 0); 
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Как показано на рис. 4.30, по сути, нам нужно вы- Рассмотрим прямоугольный 

числить длину гипотенузы прямоугольного тре  ТРеУгольник с углами 90°, 30° 
угольника с углами 30, 60 и 90 градусов, при ус- 
ловии, что нам известна длина одного из катетов. 
Тригонометрический круг на рис. 4.31 напоминает, 
что если нам известны углы и длина одной из сторон 
прямоугольного треугольника, то мы можем вы- 


и 60°. 


числить длины остальных двух сторон, используя 


синусы, косинусы и теорему Пифагора. Из курса 





математики (или сверившись с калькулятором) мы рис, 4.30. Наш срезанный 
угол в масштабированном 
представлении (углы, 
помеченные серым цветом, 


знаем, что соѕ30° = 3 ‚аѕіп 30° = 5 . Также тригоно- 


метрический круг подсказывает, что в нашем случае 





15 15 равны 30°) 
510 30° = —— ‚а соѕ30° =——. Следовательно: 
х у 
ЕЗ8 ИРИНЕ ЗЕТ Е 
2 х 


М3 05у 2х15 
2 у УЗ 





= у = 4/3 =1,732050808 


х2 + у? = г? 
соѕ9 = 


Ѕіпд = 


эх -|< 





Рис. 4.31. Синусы и косинусы помогают вычислять длины катетов прямоугольных треугольников, 
когда известны значения углов и длина гипотенузы 


Теперь мы можем с помощью теоремы Пифагора вычислить значение 2: 


2= |а 40403 +32 +4439 = 412-243. 
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А теперь соответствующим образом изменим размер треугольника: 


Баскёгоипа: #58а; /* Резервное решение */ 


Баскёгоипа: 


11пеаг-вгад1епт*(+о 1ефЕ боі+опт, 
{гапзрагеп{ 50%, грба(0,0,0,.4) 0) 
по-гереаї 100% Ө / Зет 1.73ет, 
11пеаг-вгад1еп* (-1504е5, 
{гапзрагеп{ 1.5ет, #58а Ө); 


«Единственный способ 
избавиться от искушения — 


это поддаться ему». 
Оскар Уайлд, 
«Портрет Дориана Грея» 


Рис. 4.32. Хотя мы добились 
желаемого результата, на 
практике он выглядит еще 
менее реалистичным, чем 
раньше 





Рис. 4.33. Аналоговая версия 
эффекта загнутого уголка 

(за предоставленный шикарно 
украшенный лист бумаги 
благодарю Леони и Фиби 
Веру) 





Сейчас угол выглядит как на рис. 4.32. Вы видите, 
что край треугольника совпадает со срезанным 
углом, но результат выглядит еще менее реалистич- 
ным! Хотя конкретная причина становится понятна 
не сразу, мы в своей жизни видели достаточно за- 
гнутых уголков и мгновенно понимаем, что что-то 
здесь не так. Помочь своему сознанию разобраться 
в происходящем можно, попробовав загнуть уголок 
настоящего листа бумаги примерно под таким же 
углом. Вы быстро поймете, что не существует спосо- 
ба загнуть его так, чтобы он хотя бы приблизительно 
напоминал показанное на рис. 4.32. 


Как доказывает настоящий загнутый уголок из ре- 
альной жизни, например показанный на рис. 4.33, 
нужный нам треугольник должен быть слегка по- 
вернут и обладать теми же габаритными размерами, 
что и треугольник, «отрезанный» от угла элемента. 
Поскольку поворачивать фоны мы не можем, на- 
стало время применить эффект к псевдоэлементу: 


„поте { 
роѕіїіоп: ге1аЕ1\е; 
Баскёгоипа: #58а; /* Резервное решение */ 
Баскёгоипа: 
11пеаг-вгад1еп* (-1504е5, 
{гапзрагеп{ 1.5ет, #58а Ө); 
} 


„поте: : Бефоге { 

сопфеп*: ''; 

роѕіїіоп: абѕо1и+е; 

фор: 0; гірһі: 0; 

Баскёгоипа: 11пеаг-вгад1еп{(+о 1еёЕ Ббої+от, 
{гапзрагепе 50%, грба(0,0,0,.4) 0) 
100% 9 по-гереа+; 

міаһ: Зет; 

һеірһі: 1.73ет; 
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Пока что мы всего лишь воссоздали эффект, показанный на рис. 4.32, с исполь- 
зованием псевдоэлементов. Следующим шагом будет изменение ориентации 
существующего треугольника путем замены міа+п на һеірһё и наоборот, чтобы 
он зеркально отражал срезанный угол, а не дополнял его. Затем мы повернем 
его на 30° ((90° — 30°) – 30°) против часовой стрелки, для того чтобы его гипо- 


тенуза была параллельна нашему срезанному углу: 


„поте: : Бефоге { 


соптей*: ; 

роѕіёіоп: арѕо1и+е; 

Фор: 0; гірһі: 0; 

Баскёгоипа: 1іпеаг-ргадіепі (о Іе+ё Ббої+от, 
{гапзрагепе 50%, геба(0,0,0,.4) 9) 
100% 9 по-гереа*; 

міаёһ: 1.73ет; 

һеірһё: Зет; 

{гап$Фогт: го&а+е(-ЗӨдер) ; 


Как выглядит наша записка после этих изменений, 
вы видите на рис. 4.34. Мы уже почти достигли 
желаемого эффекта, осталось лишь сдвинуть тре- 
угольник, для того чтобы гипотенузы двух треуголь- 
ников (темного и представляющего срезанный угол) 
совпали. Судя по тому, как обстоят дела сейчас, нам 
нужно сдвинуть треугольники по горизонтали, и по 
вертикали, и понять, какие именно действия необхо- 
димо произвести, не так-то просто. Упростить себе 
задачу можно, установив для свойства ёгапѕҒогт- 
огівіп значение Бо от гівћ, чтобы нижний правый 
угол треугольника стал центром вращения и, таким 
образом, был зафиксирован на одном месте: 


„поте: : Бефоге { 
/* [Остальные определения стилей] */ 
їгапѕҒогт: гоёаёе(-Зддер) ; 
їгапѕҒогт-огіріп: боот гіевһ; 


Как видно на рис. 4.35, теперь нам осталось только 
сдвинуть треугольник вертикально вверх. Опреде- 
лить точную величину сдвига нам снова поможет 
геометрия. Схема на рис. 4.36 помогает увидеть, 
что требуемое вертикальное смещение для нашего 
треугольника равно х-у = 3 - /3 =1267949192, что 
можно округлить до 1. Зет: 


«Единственный способ 
избавиться от искушения — 


это поддаться ему». 
Оскар Уайлд, 
«Портрет Дориана Грея» 





Рис. 4.34. Мы приближаемся 
к желаемому результату, 

но нам нужно повернуть 
треугольник 


«Единственный способ 
избавиться от искушения — 
это поддаться ему». 

Оскар Уайлд, 

«Портрет Дориана Грея» 





Рис. 4.35. Добавление 
ігапѕѓогт-огіодіп: роќот гідћ; 
упрощает ситуацию: теперь 
нам нужно только сместить 
треугольник по вертикали 





Рис. 4.36. Вычислить, на 
какую величину необходимо 
сдвинуть треугольник, не так 
сложно, как кажется 
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„поте: : Бефоге { 

«Единственный способ /* [Остальные определения стилей] */ 
избавиться от искушения — {гап$Фогт: Егапѕ1а+еү(-1.Зет) гофафе(-304евё); 
это поддаться ему». {гап$Фогт-ог151п: боот гірһ; 

Оскар Уайлд, } 

«Портрет Дориана Грея» 





Пример визуализации на рис. 4.37 подтвержда- 
ет, что мы наконец добились желаемого эффекта. 
И РОВНЕНЕ ИИК Уф-ф-Фф, это было нелегко! Кроме того, поскольку 
стороны совпадают теперь наш треугольник генерируется с помощью 
псевдоэлементов, мы можем сделать его еще более 
реалистичным, добавив скругленные углы (на- 
стоящие) градиенты и тени бох-ѕһайом! Финальная 
версия кода выглядит так: 


Рис. 4.37. Наши треугольни- 


„поте { 
ро$11оп: ге1аїіхе; 
Баскёгоипа: #58а; /* ЕРа11Баск */ 
Баскёгоипа: 
11 пеаг-вга1еп* (-150аер, 
{гапзрагепе 1.5ет, #58а 0); 
Богаег-гаа1и$: . Бет; 


} 
.поёе: :реҒоге { 
сопёепі: ''; 
роѕіёіоп: арѕо1и+е; 
Фор: 0; гірһё: 0; 
баскегоипа: 1Ііпеаг-егадіепї (о 1ефЕ Бої+оп, 
{гапзрагеп{ 50%, ррба(0,0,0,.2) 0, грБба(0,0,0,.4)) 
100% 0 по-гереа*; 
міаёһ: 1.73еп; 
һеівһЕ: Зет; 
їгапѕҒогт: ёгапѕ1аёеү(-1. Зет) го+аёе(-Зедер); 
ігапѕҒогт-огівіп: бобёот гіеһ; 
рогӣег-боёъот-1еғ-гаїіиѕ: іпһегії; 
бох-ѕһайом: -.2ет .2ет .Зет -.1ет грба(0,0,0,.15); 


Насладиться плодами нашего труда можно, взглянув на рис. 4.38. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеѕ.іо/ғоіаеа-согпег-геаііѕііс 
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Эффект смотрится замечательно, но насколько он 
соответствует принципам ОКУ? Давайте подумаем, 
какие правки и вариации могут часто требоваться 
в дизайнах, использующих данных эффект: 


О достаточно только одной правки для изменения 
габаритных размеров элемента и других длин 
(забивки ит. п.); 


О достаточно только двух правок (одной, если не 
брать в расчет резервное решение) для изменения 
цвета фона; 


О необходимо четыре правки и несколько нетри- 
виальных вычислений, чтобы изменить размер 
загнутого уголка; 


О необходимо пять правок и несколько еще менее 
тривиальных вычислений, чтобы изменить угол, 
под которым загнут уголок страницы. 


Два последних пункта никуда не годятся. Возможно, 
настало время прибегнуть к помощи препроцессор- 
ной примеси: 


5С55 


@тіхіп Ғо1аеа-согпег($баскегоипа, $51те, 
фапе1е: ЗӘдер) { 
роѕіїіоп: ге1аїііме; 
Баскргоипа: $баскегоипа; /* Резервное решение */ 
Баскёгоипа: 
11пеаг-вгаа1еп* (Фапе1е - 180дер, 
{гапзрагепе $$12е, $БаскКвгоипа ё); 
Богдег-гад1и$: .5ет; 


$х: $512е / ѕіп(Фапр1е); 
фу: фѕіғе / соѕ(Фапр1е); 


&::беҒоге { 

сопёепі: ''; 

роѕітіоп: абѕо1и+е; 

Фор: 0; гірһё: 0; 

браскегоипа: 1Ііпеаг-вгадіепї (+о 1ефЕ Бої+оп, 
{гапзрагеп{ 50%, грра(0,0,0,.2) Ө, 
гвба(0,0,0,.4)) 100% 0 по-гереа+; 

міаһ: Фу; һеіеһЕ: $х; 

©гапѕҒогт: ©гапѕ1афеү($у - $х) 
гоае(2*$апев1е - 9@дер); 
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Убедитесь, что транс- 

формация 

Егапѕ1а+еү() опре- 
делена перед вращением — 
в противном случае наш тре- 
угольник будет двигаться 
относительно своего угла 30°, 
так как каждая трансформа- 
ция также преобразует всю 
систему координат элемента, 
а не только сам элемент как 
таковой! 


«Единственный способ 
избавиться от искушения — 
это поддаться ему». 


Оскар Уайлд, 
«Портрет Дориана Грея» 





Рис. 4.38. Еще несколько 
эффектов — и наш загнутый 
уголок оживает 


На момент написания 

этой главы 5С55 в ис- 

ходном формате не 
поддерживает тригонометри- 
ческие функции. Для того 
чтобы обеспечить такую под- 
держку, вы можете восполь- 
зоваться каркасом Сотраѕѕ 
(ћр://сотраѕѕ-ѕіуІе.огд) или 
одной из других библиотек. 
Вы можете даже писать их са- 
мостоятельно, используя рас- 
ширения функций Тейлора! 
ІЕЅ5, с другой стороны, 
включает их по умолчанию 
с самого начала. 
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їгапѕҒогт-огіріп: боот гірһ; 
рогӣег-Ббоё+от-1Іеғі-гаїіиѕ: іпһегі+; 
Бох-5Надош: -.2ет .2ет .Зет -.1ет грба(0,0,0,.2); 
} 
} 


/* Использовать как... */ 
.по+е { 

@іпс1иде Ғо1аеа-согпег(#58а, 2ет, 40аер); 
} 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/ғоідеа-согпег-тіхіп 





Оформление 
текста 





20 Расстановка переносов 


Проблема 


Дизайнеры просто обожают выравнивание текста по ширине. Взглянув на 
шикарно оформленный журнал или книгу, вы увидите, что этот прием ис- 
пользуется повсеместно. Однако в Сети выравнивание по ширине встречается 
гораздо реже, особенно в работах опытных дизайнеров. Почему же так проис- 
ходит, учитывая, что бехё-а1ірп: јиѕїі+у; присутствует в нашем арсенале со 
времен С$5 1? 


Причина станет очевидной, если вы присмотритесь к «коридорам» на рис. 5.1. 

Они создают увеличенные межсловные интервалы, призванные выровнять текст 

слева и справа. Это не только ужасно выглядит, но и ухудшает читабельность. 

В печатном дизайне выравнивание по ширине всегда сочетается с расстановкой 

переносов. Поскольку слова при этом разбиваются на слоги, дополнительных 
пробелов почти не требуется, и текст в результате 
выглядит намного естественнее. 


До недавнего времени включить переносы на веб- 
странице было настолько сложно, что решение 

Р оказывалось хуже самой проблемы. Типичный сце- 
р 8 нарий предполагал использование кода на стороне 
сервера, код ЈауаЅсгірї, интерактивные генераторы, 
атакже руки разработчика и безграничное терпение, 


“ТҺе опу мау (о 
сег па 


ќетпрќайоп 15 ЖФ 


уіеја оі чтобы расставить мягкие переносы (&һу; ), подска- 
зывая браузеру, в каком месте каждое слово может 
Рис. 5.1. Эффект, создавае- быть разорвано. Обычно такие трудозатраты себя 


мый стандартной функцией 
С55 выравнивания текста 
по ширине 


не оправдывали, и дизайнеры прибегали к другому 
способу выравнивания текста. 
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Г А А 
Решение 


В С55 Техі Геуе[ 3 появилось новое свойство: “Ге опу мау (0 
һурһепѕ. Оно способно принимать три значения: попе, 

папиа1 и аџќо. Первоначальное значение равно тапиа1, себ па оѓ а {етриа- 
и оно соответствует существующему в настоящее 

время поведению: слова всегда можно разбить на Чоп 1$ 0 уе! 4 іо” 
слоги вручную, используя мягкие переносы. Очевид- 

но, что һурһепѕ: попе; отключает такое поведение, РИС. 5.2. Результат 

но поистине волшебных результатов позволяет ПРименения атрибута 
достигать вот эта очень простая строка С$$-кода: ны 


һурһепѕ: аи+о; 


Это все, что нам нужно. Результат вы видите на рис. 5.2. Разумеется, чтобы это 
работало, необходимо объявить язык посредством НТМТ--атрибута 1апе, но хо- 
роший разработчик должен делать это в любом случае, независимо от переносов. 


Если вам требуется более высокая степень контроля над расстановкой переносов 
(например, в коротком вступительном тексте), вы все так же можете помочь 
браузеру, добавив несколько мягких переносов (&пу; ). Свойство һурһепѕ от- 
дает им приоритет и только после этого начинает работать, выясняя, где еще 
возможно разбить слова на слоги. 


ЗАНИМАТЕЛЬНАЯ СТРАНИЧКА. 
КАК РАБОТАЕТ ОБТЕКАНИЕ ТЕКСТОМ 


Как это часто бывает в компьютерных науках, обтекание текстом кажется 
чем-то простым и прямолинейным, но в действительности это не так. Су- 
ществует множество алгоритмов, выполняющих данную функцию, среди 
которых самые популярные — жадный алгоритм (дгееду аідогїћт) и алго- 
ритм Кнута — Пласса (Кпий — РІаѕѕ адог пт). Жадный алгоритм работает, 
анализируя одну строку текста за раз и заполняя ее как можно большим 
количеством слов (или слогов, если используется расстановка переносов). 
Переход на следующую строку выполняется, когда алгоритм встречает 
первое слово/слог, которое не умещается в текущую строку. 


Алгоритм Кнута — Пласса, названный в честь разработавших его инжене- 
ров, намного изощреннее. Он рассматривает весь текст целиком и выдает 
намного более приятные с эстетической точки зрения результаты, хотя 
обработка текста, конечно же, занимает куда больше времени. 


В большинстве текстовых редакторов используется алгоритм Кнута — Плас- 
са. Однако в браузерах в настоящее время по причинам, связанным с про- 
изводительностью, реализован жадный алгоритм, поэтому результаты 
выравнивания текста по ширине не слишком хороши. 
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Резервное решение для расстановки переносов средствами С55 выглядит до- 
вольно изящно. Если свойство һурһепѕ не поддерживается, то вы получаете 
выровненный по ширине текст, который выглядит как на рис. 5.1. Конечно, 
его не так приятно читать, и выглядит он неэстетично, но все же такой вариант 
допустим. 


ПОПРОБУЙТЕ САМИ! 
НЕр://р1ау.сз55есге5..ю/пурНепаНоп 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 ТехЕ: ПЫр://м/3.огд/ТВ/с$5-ехЕ 
С55 Тех Геме 4: ИЁр://Чем.м/3.огд/с$5\миа/с5$-ех{-4 


БУДУЩЕЕ. 
КОНТРОЛЬ НАД РАССТАНОВКОЙ ПЕРЕНОСОВ 


Если вы вышли из дизайнерской среды, возможно, вас коробит такой подход 
к расстановке переносов, когда их можно только включить или выключить, 
но нельзя контролировать, как именно слова будут разделены на слоги. 


Тогда вас порадует новость, что в будущем у нас появятся намного более 
точные средства управления расстановкой переносов — несколько свя- 
занных с этим свойств уже запланированы для С55 Техї еме! 4 (НЕр://аем. 
м3.огд/сѕѕуүд/с55-ехі-4), в частности: 


һурһепате-1ітіЁ-1іпеѕ 
һурһепате-1ітіЁ-сһагѕ 
һурһепате-1іті-ғопе 
һурһепате-1іті-1аѕ+ 


һурһепате-сһагасёег 





2 1 Вставка разрыва строки 


Проблема 


Необходимость разрывать строки средствами С$$ 
обычно возникает при использовании списков опреде- 
лений (рис. 5.3), но также в некоторых других случаях. 
Чаще всего мы используем списки определений, по- 
тому что хотим быть добропорядочными киберграж- рус, 5,3. Список опреде- 
данами и создавать правильную семантическую раз- лений, где в каждой строке 
метку, даже если визуальный результат, который нам находится пара из имени 
требуется, — это всего лишь несколько строк спарами и значения 

из имени и значения. Рассмотрим такую разметку: 


Мате: Ёеа Мегои 
Етаі!: Іеа@уегои.те 
ГосаНоп: Еагёћ 


НТМЕ Мате: 
<41> Теа Мегои 
<4+>Мате : </аё> Етай: 
<аа>1еа \егои< /44> |еа@уегои. те 
ВЕ>Ета112</а Госайоп: 
<4+>Ета11 :< > 
<аа>1еа@уегои. те</аа> Бам 
<аё>1іосаіоп:</аЄ> Рис. 5.4. Стилизация 
а<аа>Еагіһ</аа> по умолчанию для нашего 
‹/а1> списка определений 


Ожидаемый визуальный результат — простая стилизация, показанная нарис. 5.3. 
На первом шаге мы чаще всего применяем пару простых приемов С55, например: 


аа { 
магё1т: 0; 
Ғопі-меівһё: 6014; 
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Однако поскольку <4+> и ‹д4а> — это блочные эле- 
менты, в результате у нас получается нечто более 
напоминающее рис. 5.4, когда каждое имя и каждое 
Рис. 5.5. 415р1ау: іп1іпе значение отображаются на отдельной строке. После- 
разрывает строки еще хуже дующие попытки обычно включают тестирование 

разных значений свойства д1ѕр1ау для элемента <>, 

<а4> или обоих, вплоть до абсолютно произвольных, 
по мере того как мы приходим в полное отчаяние. Но результат при этом чаще 
всего оказывается похожим на рис. 5.5. 


Мате: 1еа Мегои Етай: 
1еа@уегоц.те Госайоп: Еаг В 


Прежде чем рвать на себе волосы, проклиная всех богов С$$, или прощаться 
с идеей разделения понятий и переходить к модифицированию разметки, нуж- 
но все же оценить, нет ли способа сохранить ясность ума и высокие стандарты 
кодирования. 


Решение 


По сути нам нужно только добавить переносы строк в конце каждого ‹аа>. Если 
мы ничего не имеем против презентационной разметки, то можно сделать это 
с помощью старых добрых элементов <6г>. Скажем, так: 


НТМЕ 


<!-- Каждый раз, когда вы делаете это, где-то умирает котенок --> 
<4+>Мате : < /4+> 
<аа»іеа Мегои<Бг /></аа> 


Затем мы применили бы їѕр1ау:іп1іпе; ко всем <> и ‹да> и заявили, что дело 
сделано. Разумеется, это не только плохая практика с точки зрения поддержки; 
при использовании данного подхода код несоразмерно раздувается. Если бы 
мы могли использовать генерируемое содержимое для добавления переносов 
строки, работающих аналогично элементам <‹Ьг»>, это сразу решило бы нашу 
проблему! Но мы этого сделать не можем... Или все же можем? 


В действительности существует символ Опісоде, соответствующий переносу 
строки: дхөөөл. В С55-коде мы должны записывать его как "\009А" или, еще 
проще, "\А". Его можно использовать в качестве содержимого нашего псевдо- 
элемента ::а#+ег, чтобы он автоматически добавлялся в конце каждого ‹а4>, 
например так: 


аа: :аҒёег { 
сопёепі: "\А"; 


} 
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Вроде бы это должно сработать, но если мы попыта- Технически охдддА соот- 
емся применить этот код, результат нас разочарует: но  Ветствует символу Нпе Рееа 
сравнению с рис. 5.5 ничего не изменится. Но это не рее строю отораи 
мы получаем в ЈауаЅсгірї, 
означает, что мы идем по неверному пути, простомы когда используем "\п". Есть 
кое-что забыли. На самом деле то, что мы делаем с по- также символ Саггіаде Вет 
мощью этого С$$-кода, эквивалентно добавлению («Возврат каретки», "\г" 
переносов строки в нашей НТМТ-разметке прямо в 25, "\0" в С55), но в со- 
перед закрывающимися тегами ‹/а4>. Помните, что временных браузерах он не 
происходит с переносами строк в коде НТМІ? По  ТРебуется. 
умолчанию они схлопываются вместе с остальным 
пустым пространством. Чаще всего это как раз то, что нам нужно, так как в про- 
тивном случае нам пришлось бы форматировать всю НТМТ-страницу целиком 
как одну строку. Однако иногда пустое пространство и переносы строки нужно 
сохранять, как, например, в блоках с примерами кода. И что же мы обычно делаем 
в таких ситуациях? Мы применяем мһі+е-ѕрасе: рге;. То же самое можно сделать 
и внашем примере, но только для генерируемых переносов строк. 


Все, что у нас есть, — это один символ переноса строки, поэтому нас не особо 
волнует, сохранится пустое пространство или нет (оно все равно отсутствует). 
Следовательно, нам подойдет любое значение рге (рге, рге-1іпе, рге-мгар). 
Я рекомендую использовать рге, так как оно поддерживается наибольшим 
количеством браузеров. Давайте соберем все вместе: 


ає, аа { аіѕр1ау: іп1іпе; } 


аа { 
маг21т: 0; 
Ғопё-меівћё: бо1а; 
} 
аа: :ағёег { 
сопёеп: "\д"; 
мһі+е-ѕрасе: рге; 
} 


Протестировав этот код, вы увидите, что он действительно работает и обеспечивает 
результат, в точности соответствующий представленному на рис. 5.3! Но насколько 
это решение гибкое? Предположим, мы хотим добавить второй адрес электронной 
почты к записям пользователей, которые содержатся в нашем списке определений: 


НТМЕ 
<9+>Ета11:</а+> 


<аа>1еа@\егои.те</а4а> 
<аа>1еауегоци@ті+ .еди</аа> 
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Мате: Ёеа Мегои 
Етай: Іеа@уегои.те 
Іеамегои@ті.ейи 
Іосайоп: Еағгћ 


Рис. 5.6. Наше решение ломается, когда используется несколько элементов <аӣ> 


Теперь результат выглядит, как показано на рис. 5.6, и это действительно 
странно. Поскольку перенос строки добавляется после каждого ‹аа>, каждое 
значение выводится на отдельной строке, даже если необходимости переносить 
его на новую строку нет. Было бы намного лучше, если бы множественные 
значения разделялись запятыми, но оставались на одной строке (при условии, 
что там достаточно места). 


В идеальном случае нам хотелось бы выбирать только последние ‹а4> перед 
<ає> и добавлять переносы строк только для них, но не для всех элементов ‹а9>. 
Однако в своем текущем состоянии селекторы С$$ не обеспечивают такой 
точности, потому что не способны заглядывать вперед и проверять элементы 
после субъекта в ООМ-дереве. Необходимо придумать другой способ. Одна 
из идей — попробовать добавлять переносы строк перед ‹а+>, а не после ‹19>: 


Е: : Бефоге { 
сопфеп*: '\д'; 
мһі+е-ѕрасе: рге; 


Однако это приводит к появлению пустой первой строки, поскольку селектор 
применяется также и к первому ‹4*>. Для того чтобы справиться с этим, можно 
попытаться использовать любой из следующих селекторов вместо а*: 


О ає: по (: Ғігѕъ-сһі1а) 
О а-а 





О аа + а+ 


Мы выберем последний вариант, так как он будет работать, в том числе и в сце- 
нарии, когда для одного и того же значения определено несколько элементов 
<а+є>, в отличие от первых двух селекторов, которые в таких условиях ломаются. 
Также нам необходимо как-то разделять множественные элементы <да>, если 
использование в качестве разделителя обыкновенного пробела нас не удовлет- 
воряет (это допустимо в одних случаях, но дает плохие результаты в других). 
В идеальной ситуации нам бы хотелось иметь возможность сказать браузеру: 
«Добавляй запятую после каждого <аа>, предшествующего другому <аа›», но 
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опять же, современные селекторы С$5 не настолько хороши. Таким образом, 
нам придется добавлять запятую перед каждым ‹99>, следующим за другим 
<аа>. Результирующий С55-код представлен далее (а результат вы можете 
увидеть на рис. 5.7): 


аа + аё: :Бефоге { 
сопфеп*: '\д'; 
мһі+е-ѕрасе: рге; 


} 


аа + аа: :Бефоге { 


сопепё: ', "; 
Ғопё-меівһћё: погта1; 


Мате: Геа Мегои 
Етай: 1еа@уегоц.те, Іеауегои@ тіё.ейи 
Госайоп: Еагёћ 


Рис. 5.7. Итоговый результат 


Помните, что если ваша разметка включает (незакомментированное) пустое 
пространство между множественными последовательными элементами ‹ад>, 
то перед запятой появится пробел. Есть несколько способов справиться с этим 
недостатком, но ни один из них не идеален. Например, поля отрицательного 
размера: 


аа + аа: :бреғоге { 


сопъепё: ', "; 
тагріп-Іеғё: -.25ет; 
Ғопё-меівһћё: погта1; 


Это решение будет работать, но оно довольно хрупкое. В случае отображения 
содержимого на другом фоне и с другими метриками это пространство может 
оказаться шире или уже ё. 25ет, и тогда результат будет выглядеть странно. 
Однако с большинством шрифтов разница пренебрежимо мала. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/1іпе-Бгеакѕ 
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ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, свойство баскегоцпа-ѕіғе, секрет «Фон в полоску», секрет 
«Гибкое позиционирование фона» 


Проблема 


Когда несколько лет назад мы впервые получили псевдоклассы :пЕН- 
сһі14()/:пЕһ-о#-%уре(), одним из наиболее распространенных вариантов их 
применения стали таблицы с полосатой заливкой «зеброй» (рис. 5.8). То, что 
раньше требовало написания кода на серверной стороне, сценариев на кли- 
ентской стороне или утомительного ручного кодирования, теперь может быть 
реализовано всего лишь несколькими строками кода: 


г: пЕһ-сһі1а(еуеп) { 
раскргоипа: геба(0,0,0,.2); 
} 


Однако когда дело касается применения того же эффекта к строкам текста, 
а не к строкам таблицы, мы все так же бессильны. Этот прием особенно удо- 
бен для оформления фрагментов кода, так как позволяет делать код более 

читабельным. Многие разработчики прибегают 
Многие разработчики отправ- к помощи Јауа$Ѕсгірі, оборачивая каждую строку 
ляли запросы на добавление в собственный <аіу»>, для того чтобы все так же иметь 
псевдокласса : пїћ-1іпе() возможность использовать технику с :пёћ-сһі14(), 
віравонуюігрулпу т абстрагируясь от этого безобразия с помощью 
просьбы были отвергнуты по о 

функций подсветки синтаксиса. Но это не только 


причинам, связанным с про- 
изводительностью. субоптимально с точки зрения чистоты кода (код 
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]$ не должен быть связан со стилизацией); слишком большое количество 
ПОМ-элементов может замедлить работу страницы, кроме того, это в любом 
случае хрупкое решение (что произойдет, если вы увеличите размер шрифта 
и потребуется дать текст с обтеканием?). Существует ли лучший способ? 


озо 83 свз-зесгееа 

‹ : а о $ б 

ста-чесчиь 

Рене» м. рые мозлеа 5ле Кла 

$3 Оторьох р 

5 В боге 
В мму ғ ч 
Комі Огіме * слаотег-алетатола гал 


сларлег-Баскогоци аа Нити 
слартег-етесїз пот 


АгОгор 





8 
У . 
У Ооситегів 1 спарте-тигобислов тті 
О сомов» ж спарлеелвуокл тті 
СЖ. ег. мт 
ОезАчор, мастере. 
О слаоь умт 
21 Репиеа ж сларлег-ых ті 
{$} іозуееои ж сору. пты 
А совет 
Аррісабоге © ангора 
В момез # ревіасе еті 
мт С 
* ерасе поті 


] Зстогаһоба Баа 


1.024 эеснья. 125.67 00 аувіаріа 


Рис. 5.8. Таблицы с полосатой заливкой «зеброй» всегда были популярны как в дизайне 
пользовательских интерфейсов (так оформлен список файлов в Мас ОЗ Х), так и в печатном 
дизайне, поскольку чередование фонового цвета помогает отслеживать взглядом содержимое 
длинной строки 


Решение 


Вместо того чтобы зацикливаться на добавлении темного фона к элементам, 
представляющим строки, давайте взглянем на проблему под другим углом. 
Почему бы не применить свойство, создающее фоновое изображение, ко всему 
элементу и не определить чередующиеся цвета на этом фоновом изобра- 
жении? На первый взгляд идея кажется ужасной, 

но вспомните, что мы можем генерировать фоны 

непосредственно с помощью С$5$-кода, используя мһіЈе (+гие) { 

градиенты С$$, а размеры указывать в единицах ем, аг а = пем Бафе(); 
заставляя их автоматически адаптироваться к из- ЕСО Ве расе Е 


: а.реМоп&ћ()==3) { 
менениям значения Фоп* - ѕ5іхе. 
а1егі( "ТКОГОГОг"); 


Давайте попробуем развить эту идею, чтобы по- } 
местить фрагмент кода с рис. 5.9 на фон с чере- } 
дующимися цветными полосами. Для начала нам 
нужно создать горизонтальные полосы, применив 

без чередования заливки, 
технику из секрета «Фон в полоску». Значение а ауе ути 
баскегоипа-ѕіғе должно в два раза превышать сплошного цвета 


Рис. 5.9. Фрагмент кода 
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мһі1е (+гие) { 
уаг а = пем Ба*е(); 
іҒ (а.реЁра+е()==1 && 
а. веМопћ()==3) { 
а1егі("ТКОГОГОІг"); 


Рис. 5.10. Наша первая по- 
пытка поместить фрагмент 
кода на фон с чередующими- 
ся цветными полосами 


мһі1е (+гие) { 
уаг а = пем раќе(); 
1+ (а.ре+ра+е()==1 && 
а.веМопћ()==3) { 
а1егі("ТКОГОГОГ"); 


Рис. 5.11. Готовый результат 


Почему мы не воспользова- 
лись простым сокращением 
баскегоипа для всех зна- 
чений, связанных с фоном? 
Потому что тогда нам по- 
требовалось бы отдельное 
объявление для резервного 
решения, предназначенного 
для старых браузеров. То есть 
нам пришлось бы дважды 
упоминать значение Бе15е, 
что иллюстрирует принцип 
Ү/ЕТ, но никак не ОВҮ. 
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значение 1іпе-һеірһ, так как каждая плитка гра- 
диента охватывает две строки. Первая попытка 
создать нужный код выглядит примерно так: 


райаіпе: . бет; 

1іпе-һеірһё: 1.5; 

баскегоипа: беіғве; 

Баскёгоипа-1таёе: 1іпеаг-ргааіепї (гвба(0,0,0,.2) 
50%, Егапзрагеп* 0); 

раскргоипа-ѕіғе: аифо Зет; 


Как видно на рис. 5.10, результат очень близок 
к тому, чего мы хотим добиться. Мы можем даже 
менять размер шрифта, и полосы будут соответству- 
ющим образом сжиматься и расширяться! Однако 
в глаза сразу бросается серьезная проблема: полосы 
не выровнены по строкам кода, что вроде как сводит 
на нет все наши усилия. Почему же так происходит? 


Если вы внимательно посмотрите на рис. 5.10, 
то заметите, что первая полоса начинается ввер- 
ху контейнера — ожидаемое поведение фонового 
изображения. Но наш код начинается ниже, так 
как он смотрелся бы уродливо, будучи прижатым 
к верхней кромке контейнера. Как вы видите, мы 
добавили забивку шириной .5ем, и это как раз то 
смещение, которое отделяет наши полосы от же- 
лаемой позиции. 


Одним из вариантов решения данной проблемы 
было бы использование Басквгоџпӣ-роѕі+іоп, чтобы 
подвинуть полосы на .5ет вниз. Однако если позднее 
мы решим изменить величину забивки, то нам также 
потребуется скорректировать позицию фона, что не 
соответствует принципам ОКУ. Можно ли сделать 
так, чтобы фон автоматически подстраивался под 
величину забивки? 


Помните свойство басквгоипа -огівіп из секрета 
<«Тибкое позиционирование фона»? Это как раз то, 
что нам нужно: способ приказать браузеру использо- 
вать в качестве точки отсчета для вычисления значе- 
ния раскёгоипа-ро$11оп кромку поля содержимого, 
а не кромку поля забивки, которая используется по 
умолчанию. Давайте добавим это в наш рецепт: 
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рааа1т=: . бет; 

1іпе-һеірһі: 1.5; 

баскегоипа: беіғре; 

Баскргоипа-ѕіғе: аи+о Зет; 

Баскргоипа-огівіп: сопёепі -бох; 

Баскргоипа-ітаре: 1іпеаг-ргадіепі(гвба(0,0,0,.2) 50%, +гапѕрагепі Ө); 


Как видно на рис. 5.11, это именно то, чего мы ожидали от полосатой заливки 
строк! Так как для полос мы использовали полупрозрачные цвета, мы можем 
даже изменить цвет основного фона, и полосы все так же будут видны. По сути, 
это решение настолько гибкое, что единственный способ сломать его! — из- 
менить значение 1іпе-һеівһ+, не скорректировав соответствующим образом 
баскегоипа- ѕ1хе. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/2еБга-1іпеѕ 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Васкагоцпаѕ & Вогаегѕ: ћҺір://\у3.ого/ТВ/с55-раскдгоипаѕ 
С55 Ітаде Маіиеѕ: Һр://%3.огд/ТЕ/с55-ітадеѕ 





!' Здесь мы предполагаем, что имеем дело с фрагментами кода. В общем случае решение 
может сломаться из-за строковых элементов, увеличивающих высоту строки, например 
изображений или строкового содержимого с ббльшим значением ҒопЁ - $12е. 


Корректировка величины 
табуляции 


Проблема 


С веб-страницами, содержащими большое количество кода, такими как страни- 
цы документации или учебников, связаны собственные уникальные сложности 
стилизации. К элементам ‹рге> и ‹соаде>, с помощью которых мы оформляем 
код, применяется стилизация по умолчанию, определяемая пользовательским 


агентом, например такая: 


мһі1е (гие) { 
уаг а = пем Ба*е(); 
1+ (а. реїра+е()==1 
а. реМопЁћ ()==3 
а1егі ("ТВОЁ 


Рис. 5.12. Так код выглядит 
с величиной табуляции по 
умолчанию, равной восьми 
символам 


Вы поморщились при упоми- 
нании табуляции как средства 
создания отступов в коде? 
Это не входит в список тем, 
рассматриваемых в данной 
книге, но мои доводы пред- 
ставлены на странице ћір:// 
Іеа.уегои.те/2012/01/№һуёаБѕ- 
аге-сіеагіу-ѕирегіог. 


рге, соде { 
Ғопё-Ғаті1у: топоѕрасе; 


} 


рге { 

415р1ау: Б1оск; 
пагвіп: 1ет 0; 
мһіёе-ѕрасе: рге; 


} 


Однако этого определенно недостаточно для того, 
чтобы учесть все уникальные трудности отобра- 
жения кода. Одна из самых серьезных проблем 
заключается в том, что хотя табуляция идеально 
подходит для создания отступов в коде, очень часто 
ее стараются избегать, так как место, выделяемое 
браузером для отображения табуляции, по ширине 
равно целым восьми (!) символам. Посмотрите на 
рис. 5.12 — как плохо выглядят такие большие от- 
ступы и как бездарно расходуется место на экране: 
наш код даже не поместился в свой контейнер! 
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Решение 


К счастью, в С$$ Техё Геуе| 3 у нас появилось но- 
вое свойство С55 для управления этой величиной: 
{аб -$12е. В качестве значения оно принимает число 
(количество символов) или длину (что редко бывает 
полезным). Чаще всего мы задаем значение 4 (то 
есть ширина четырех символов) или 2 — последняя 
тенденция в оформлении отступов строк кода: 


рге { 
+ар-ѕіғе: 2; 
и 


Как видно на рис. 5.13, код теперь читать намного 
проще. Вы могли бы даже установить значение +аь- 
$1те, равное в, для того чтобы полностью отключить 
табуляцию, но это редко (или вообще никогда) дает 
хорошие результаты, что подтверждает рис. 5.14. 
Если свойство не поддерживается, то ничего не 
ломается — мы просто получаем ужасно широкую 
табуляцию, с которой нам и так приходилось ми- 
риться все эти годы. 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.с555есге.10/ваб-$хе 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Техі: Һр://%3.огд/ТК/с55-(ехі 
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мһі1е (+гие) { 
уаг ӣ = пем раёе(); 
1+ (а. бераїе()==1 && 
а.веёМопећ()==3) { 
а1егі ( "ТКОГОГОг"); 


Рис. 5.13. Тот же код, 

что и на рис. 5.12, здесь 
отображается с табуляцией, 
равной ширине двух символов 


мһі1е (+гие) { 
уаг а = пем ра+е(); 
1+ (а.ре+ра+е()==1 && 
а.веёмМопећ()==3) { 
а1егі( "ТКОГОГОг"); 
} 
} 


Рис. 5.14. Код отображается 
с нулевой табуляцией, 
вследствие чего все отступы, 
созданные табуляцией, 
исчезают. Не делайте так! 


24 Лигатуры 
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Рис. 5.15. Распространенные 
лигатуры, которые можно 
обнаружить в большинстве 
шрифтов с засечками 


Проблема 


Так же как и люди, не все глифы хорошо ужива- 
ются вместе. Взять, например, символы Ёи і в боль- 
шинстве шрифтов с засечками. Точка, принадлежа- 
щая символу і, часто налезает на верхний выносной 
элемент символа Ё из-за чего эта пара выглядит 
некрасиво (первый пример на рис. 5.15). 


Чтобы устранить это недоразумение, в дизайн 
шрифтов часто включают дополнительные глифы, 
называемые лигатурами. Это индивидуально раз- 
работанные пары и тройки глифов, которые про- 
грамма набора текста автоматически подставляет, 
когда соответствующие символы находятся друг 
рядом с другом. Например, на рис. 5.15 вы видите 
несколько распространенных лигатур. Обратите 
внимание, насколько лучше они смотрятся, чем 
просто находящиеся рядом эквивалентные глифы. 


Также существуют так называемые дискретные лигатуры (рис. 5.16), которые 
разрабатываются ради стилистической альтернативы, а не потому, что с соот- 
ветствующими символами связаны какие-то проблемы отображения, когда те 
стоят вплотную друг к другу. 


Однако в браузерах дискретные лигатуры никогда по умолчанию не использу- 
ются (и это правильно), а зачастую не используются и обыкновенные лигатуры 
(а это уже ошибка). В действительности до недавнего времени единственным 
способом задействовать любую лигатуру было добавление в код эквивалентного 


символа Отисо4е: например, &#х+601; для лигату- 
ры й. Но этот метод создает больше проблем, чем 
решает: 


О очевидно, что разметку становится трудно читать 
и еще сложнее писать (попробуйте догадаться, 
что за слово кроется в шифре де&#х+661; пе!); 


О если текущий шрифт не включает символ для 
данной лигатуры, то результат начинает смахи- 
вать на анонимки из вырезанных газетных букв 


(рис. 5.17); 


О не для каждой лигатуры существует эквива- 
лентный стандартизированный символ Опісойе. 
Например, лигатуре сё не соответствует никакой 
символ Опісоде, и в любых шрифтах, включаю- 
щих ее, этот символ должен быть помещен в блок 
Опісоде РОА (Риуае Озег Агеа, область частного 
использования); 


О это снижает доступность текста, в том числе 
для копирования и вставки, поиска и программ 
голосового чтения экрана. Многие приложения 
достаточно умны, чтобы правильно обрабатывать 
такие символы, но далеко не все. Поиск может 
даже сломаться в некоторых браузерах. 


Определенно, в наше время должен существовать 
способ получше! 


Решение 


В С$$ Еопќѕ І еуеІ 3 (п&р://мЗ.огд/ТВ/с$$3-Гопёз) старое 
доброе свойство +Ғопё -уагіапї было преобразова- 
но в сокращение, включающее множество новых 
полных свойств. Одно из них — это Ғопі-уагіапё- 
1іваигеѕ, разработанное специально с целью 
включения и выключения лигатур. Для того чтобы 
включить все возможные лигатуры, необходимо 
использовать три идентификатора: 


Фоп*-уаг1ап*-115афиге$: соттоп-11вафиге$ 
аіѕсгеіопагу-1іваёигеѕ 
һіѕёогіса1-11іва+игеѕ; 
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На самом деле скромный ам- 
персанд (&), который мы все 
знаем и любим, происходит 
от лигатуры букв Е и  (еЁна 
латыни, что означает «и»). 


5{ 51 
се С 


Рис. 5.16. Дискретные лига- 
туры, которые можно найти 
во многих профессиональных 
шрифтах с засечками 


е 


Рис. 5.17. Использование 
жестко закодированных 
лигатур часто приводит 

к ужасным результатам, если 
в используемом шрифте не 
предусмотрен глиф для дан- 
ной лигатуры 
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Это свойство наследуется. Если вы вдруг обнаружите, что дискретные лига- 
туры ухудшают читабельность, то можете выключить только их. Для этого 
используйте: 


Фоп*-уаг1ап*-11вафиге$: соттоп- 1ісаёигеѕ; 


Вы можете даже явно выключить оставшиеся два типа: 


Фоп*-уаг1ап*-11вафиге$: соттоп-11вафиге$ 
по-аїіѕсгеёіопагу-1ірваїигеѕ 
по-һіѕТогіса1-1іваїигеѕ; 


фоп{-уаг1ап*-11вафигез также принимает значение попе, которое отключает 
любые типы лигатур. Не используйте попе, если только у вас нет абсолютного 
понимания того, что вы делаете. Чтобы сбросить Топ -маг1ап{-11вафиге$ до 
первоначального значения, следует использовать погта1, а не попе. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/Іідаёигеѕ 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 ҒопЁѕ: Һр: //у3.огд/ТВ/с55-Ёопіѕ 
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ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые навыки внедрения шрифтов посредством правил @+оп*-+асе 


Проблема 


С С 02° Со 


Рис. 5.18. Несколько милых амперсандов в шрифтах, доступных по умолчанию на большинстве 
компьютеров. Слева направо: ВазКегу!е, Соџду О!а ЅїуІе, Сагатопа, Раіайпо (все курсивные) 


Вы наверняка заметили, что в книгах, посвященных типографике, скромный 
амперсанд всегда превозносится до небес. Никакой другой символ не придает 
тексту столько элегантности, сколько изящный амперсанд. Целые веб-сайты 
посвящают поиску шрифтов с самыми красивыми амперсандами. Однако най- 
денный шрифт необязательно будет тем, какой вы хотели бы использовать для 
всего остального текста. В конце концов, действительно красивый и элегантный 
эффект в заголовках создается контрастом между симпатичным шрифтом 
без засечек и прелестными, замысловатыми амперсандами из шрифтов с за- 
сечками. 


Веб-дизайнеры осознали это уже довольно давно, но техника достижения этого 
эффекта остается кустарной и трудоемкой. Чаще всего амперсанд приходится 
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оборачивать в <зрап>, делая это либо посредством сценария, либо вручную, 
например: 


НТМЕ 
НТМЕ <ѕрап с1а$$="атр" >&атр;</зрап> С55 


Затем мы задаем желаемые настройки стиля шрифта только к классу .апр: 


.атр { 
Ғопё-Ғаті1у: Ваѕкегуі11е, "Соџау 01а ѕ+у1е", 


багатопа, Ра1а+іпо, ѕегі+; 
ҒопЕ-5у1е: 1{а11с; 


НТМ 5 С 
текста до и после применения данного решения 


НТМІ. & С$$ вы можете видеть на рис. 5.19. Однако это грязная 
техника, а в некоторых ситуациях, когда у нас нет 


Рис: 519 НАЗаГояовоЕ возможности с легкостью редактировать разметку 
НТМЕ & С5$ до и после НТМЕ (например, при использовании СМ), ее 
украшения замысловатым и вовсе применить невозможно. Нельзя ли просто 
амперсандом приказать С$$ применять другие стили к опреде- 


ленным символам? 


Решение 


Оказывается, для стилизации определенных символов (и даже диапазонов 
символов) мы действительно можем использовать другой шрифт, но способ 
достижения этого эффекта не так прост, как хотелось бы. 


Обычно мы определяем несколько шрифтов (стеки шрифтов) в объявлениях 
Ғопё -Ғаті1у, для того чтобы в ситуациях, когда предпочтительный шрифт недо- 
ступен, браузер мог использовать другие шрифты, также подходящие нашему 
дизайну. Однако многие разработчики забывают, что это также работает и для 
отдельных символов. Если шрифт доступен, но содержит лишь несколько 
символов, то он будет использоваться для отображения только этих символов, 
а для всех остальных символов браузер будет использовать резервные шрифты. 
Это верно как для локальных, так и для внедряемых шрифтов, добавляемых 
посредством правил @+Роп{-Расе. 


Следовательно, если у нас есть шрифт с одним только символом (догадайтесь 
каким!), то он будет использован только для отображения данного символа, 
а все остальные символы получат второй, третий или последующий шрифт из 
нашего стека шрифтов. Таким образом, у нас есть простой способ стилизации 
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амперсандов: нужно создать веб-шрифт, включающий только нужный нам ампер- 
санд, добавить его с помощью @#опё- асе, а затем указать первым в стеке шрифтов: 


@РопЕ-Фасе { 
Ғоп-Ғаті1у: Атрегѕапа; 
гс: иг1("ҒопЕѕ /атрегѕапа.моғ#+") ; 


} 


һ1 { 
Ғопё-Ғаті1у: Атрегзапа, Не1уетіса, ѕапѕ-ѕегі#; 


Хотя это гибкое решение, оно субоптимально, если наша цель — использовать 
для стилизации амперсандов один из встроенных шрифтов. Создавать файл 
шрифта — уже большая морока, кроме того, это добавляет еще один НТТР- 
запрос, не говоря уже о потенциальных юридических проблемах в случаях, 
когда требуемый шрифт не допускает подмену символов. Существует ли способ 
использовать локальные шрифты? 


Вы, вероятно, знаете, что дескриптор эгс в правилах @#ғопё-Ғасе также принимает 
функцию 1оса1(), предназначенную для указания имен локальных шрифтов. 
Следовательно, вместо отдельного веб-шрифта вы могли бы определить стек 
локальных шрифтов: 


@РопЕ-Расе { 
Ғоп-Ғаті1у: Атрегѕапа; 
5гс: 1оса1( 'Ваѕкегуі11е'), 
1оса1( 'боиду 01а $+у1е'), 
1оса1( 'багатопа'), 
1оса1( 'Ра1а{1по'); 


Однако если вы попытаетесь сейчас применить 

шрифт Атрегзап4, то заметите, что теперь весь 

текст выводится с использованием нашего шриф- 

та с засечками (рис. 5.20), так как перечисленные НТМІ. & 
шрифты включают все символы. Это не означает, 

что мы пошли по неверному пути. Мы просто за- С с с 

были дескриптор, позволяющий объявить, что из 

этих локальных шрифтов нас интересует только Рис. 5.20. Добавление ло- 
глиф амперсанда. Такой дескриптор существует, он кальных шрифтов посред- 


называется ип1соае-гапре. ством тол -тасе: приводит 
к тому, что они по умолчанию 


Дескриптор ип1соде-гапве работает только внутри используются для оформле- 
правил @Роп{ -Расе (отсюда и термин «дескриптор»; ния всего текста 
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$4г1п#спагСодед* () 
(7) возвращает непра- 
вильные результаты 
для символов Опісойе ниже 
ВМР (Ваѕіс Митоца! РІапе — 
базовая многоязыковая пло- 
скость). Однако 99,9% симво- 
лов, которые вам когда-либо 
потребуются, находятся 
в этой плоскости. Если вы по- 
лучаете результат в диапазо- 
не 0800-ОЕЕЕ это означает, 
что у вас «астральный» сим- 
вол и вам лучше прибегнуть 
к помощи надежного сетевого 
инструмента для выяснения, 
какова его кодовая точка 
Опісоае. Метод Е56 
ЅЕгіпе#содеРоіпЕА+ () реша- 
ет эту проблему. 
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это не свойство С55) и ограничивает используемые 
символы определенным поднабором. Он работает 
как с локальными, таки с удаленными шрифтами. 
Многие браузеры даже настолько умны, что не за- 
гружают удаленные шрифты, если соответствующие 
символы на странице отсутствуют! 


К сожалению, синтаксис ип1соде-гапре настолько же 
сложен, насколько полезен сам этот дескриптор. Он 
работает с кодовыми точками Итсоде, а не с буквенны- 
ми символами. Следовательно, прежде чем применять 
его, необходимо найти шестнадцатеричную кодовую 
точку символов, которые вы хотели бы указать в де- 
скрипторе. Для этого существует множество сетевых 
инструментов, или же вы можете просто воспользо- 
ваться следующим фрагментом ]5-кода в консоли: 


25 
"а". сһагСодеА+(0).Фоѕігіпе(16); // возвращает 26 


Теперь, зная шестнадцатеричные кодовые точки, вы можете добавлять к ним 
спереди 0+, задавая таким образом отдельные символы. Вот как наше объявление 
будет выглядеть для сценария с амперсандом: 


ип1соде-гапёе: 0+26; 


Если вам необходимо указать диапазон символов, то для этого все так же 
требуется только один префикс 0+, например 0+490-4ғЕ. В действительности 
для такого типа диапазона вы могли бы даже использовать подстановочные 
символы и записывать его как 1+4??. Множественные символы и диапазоны 


также допустимы, но их нужно разделять запятыми; например: 0+26, 


0+4??, 


0+2665-2670. Нам же достаточно одного символа. Наш код теперь выглядит так: 


@Ғоп+ -Ғасе { 


Ғоп-Ғаті1у: Атрегѕапа; 

5гс: 1Іоса1('Ваѕкегуі11е'), 
1оса1( 'боиду 01а $+у1е'), 
1оса1( 'Ра1а{1по'), 
1оса1('Воок Апёідиа'); 


ип1соде-гапёе: +26; 


} 
һ1 { 


Ғоп-Ғаті1у: Атрегѕапа, Не1уетіса, ѕапѕ-ѕегі#; 


| 
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Протестировав его (рис. 5.21), вы увидите, что нам НТМ | № & С$$ 


действительно удалось применить другой шрифт 

к амперсандам! Однако результат все же еще не Рис. 5.21. Применение 

совсем тот, которого мы ожидали. Амперсанд на ДРУГОГО шрифта к нашим 
амперсандам с помощью 

рис. 5.19 был из курсивного варианта шрифта 

Вах ТЇ стека шрифтов и дескриптора 

азкегуШе, ведь чаще всего именно в курсивных а; соде-гапве 

шрифтах с засечками амперсанды бывают намного 

симпатичнее. Но мы не стилизуем непосредствен- 

но сами амперсанды, так как же нам использовать 

курсивное начертание? 


Одной из первых идей могло бы стать использование 

дескриптора #опё-ѕ+у1е в правиле @#оп+-Ғасе. Од- 

нако это не даст желаемого результата. Дескриптор 

всего лишь приказывает браузеру использовать эти 

шрифты для курсивного текста. Следовательно, наш Чтобы узнать Роз5спреимя 
шрифт Атрегѕарі будет полностью проигнорирован,  РИФта в Мас 0$ Х, выберите 
если только вся строка заголовка не будет оформ- ра нез ТОВ А 
лена курсивом (и тогда мы действительно увидим и 
симпатичный курсивный амперсанд). 


К сожалению, единственным решением здесь оста- 
ется небольшой трюк: вместо названия семейства 
шрифтов мы воспользуемся Роз&5спрё-именем кон- 
кретного стиля /конкретной насыщенности шриф- 
та, который нам требуется. Таким образом, для по- 
лучения курсивных версий используемых шрифтов 
нам нужен такой код: 


@Ғоп+ -Ғасе { 
Ғоп-Ғаті1у: Атрегѕапа; 
5гс: Іоса1( 'Ваѕкегуі11е-Ііа1іс'), 
1оса1( 'боиду01а$+у1ет-Т+а11с'), 
1оса1( 'Ра1а{1по-Т%а11с'), 
1оса1( ' ВоокАпёідиа-Іба1іс'); 
ип1соде-гапёе: 0+26; 


} 


ћ1 { 
Ғопё-Ғаті1у: Атрегзапа, Не1уе+іса, ѕапѕ-ѕегіғ; 


} 


И это, наконец, дает нам желаемые амперсанды 
в точности как на рис. 5.19. К сожалению, если нам 
потребуется дополнительная настройка стилей для 
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амперсандов (скажем, мы захотим увеличить кегль шрифта, снизить непро- 
зрачность или сделать что-то еще), то придется пойти по пути использования 
НТМГ-элемента. Но если все, что нам нужно, — это другой шрифт и другой 
стиль/другая насыщенность шрифта, то этот трюк способен на настоящие чу- 
деса! Тот же общий принцип можно использовать для стилизации с использо- 
ванием других шрифтов чисел, символов и знаков препинания — возможности 
бесконечны! 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/атреғгѕапӣѕ 


Спасибо Дрю Маклиллану (һіїр://а!іпћеһеаа.сот) за первую 
версию этого эффекта (Һ&р://24%мауѕ.огд/2011/сгеайпо-сиѕіотѓопі- 
Ѕѕіаскѕ-міһ-ипісоае-гапде). 

Благодарности 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 РопЁ$: Һр: //у3.огд/ТВ/с55-Ёопіёѕ 


26 Настройки подчеркивания 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, свойство баскргоипа-ѕіге, свойство ех*-5Падош, секрет 
«Фон в полоску» 


Проблема 


Дизайнеры — большие привереды. Мы всегда пытаемся переделать все под 
себя и очень щепетильны в реализации идей, добиваясь максимального соот- 
ветствия с видением и стремясь создавать интуитивно понятные и простые 
в использовании дизайны. Значения по умолчанию редко бывают достаточно 
хороши для нас. 


Подчеркивание текста — одна из тех вещей, которые нам очень нравится 
подгонять под свой вкус. Хотя стандартное подчеркивание также работает не- 
плохо, чаще всего оно смотрится слишком навязчиво, не говоря уже о том, что 
в разных браузерах оно визуализируется по-разному. И несмотря на то что 
подчеркивание текста доступно нам со времен зарождения Сети, у нас никог- 
да не было возможности настраивать его вид. Даже появление С$$ дало нам 
только обыкновенный выключатель — использовать подчеркивание или нет: 
+ехі-дӢесогаёіоп: ипӣег1іпе; 


Как обычно, когда нам не предоставляют нужных инструментов, мы сами при- 
думываем трюки. У нас не было возможности настраивать вид подчеркивания 
текста, поэтому мы начали имитировать его с помощью рамок — не исключено, 
что это вообще самый первый трюк С$$, придуманный дизайнерами: 


а[һге+] { 
Богаег-Бо{Фот: 1рх $0114 ргау; 
їехі-десога+іоп: попе; 
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“Тће ошу уау © вес 
па оа ќетрќабопр 15 


їо у1еЈа о к.” 


Рис. 5.22. Ложные подчерки- 
вания, созданные с помощью 
Богаег-бБо{от 


Насколько ближе? На толщи- 
ну линии, ведь единственное 
отличие этого метода состоит 
в том, что подчеркивание ри- 
суется внутри поля. 


“Тһе опу мау (о 


ое А оЁа єетрѓа- 
поп 


15 (о у@ 4 (0 к.” 


Рис. 5.23. Попытка справить- 
ся с проблемой подчеркива- 
ний, создаваемых нижним 
краем рамки, работает, но 
только до тех пор, пока не 
возникает необходимость 
перенести текст на новую 
строку, — и тогда начинается 
полнейшая неразбериха 


“Тһе опу мау (о бег 


па оЃа ќетрќабор 1$ 





(о уе 4 (о и.” 


Рис. 5.24. Наши аккуратно 
сработанные уникальные 

подчеркивания, созданные 
с помощью градиентов С55 
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Несмотря на то что, имитируя подчеркивание текста 
с помощью богаег-броїёот, мы можем управлять цве- 
том, толщиной и стилем линии, это решение далеко 
от идеала. Как видно на рис. 5.22, такие «подчеркива- 
ния» находятся слишком далеко от текста — даже под 
нижними выносными элементами глифов! Можно 
было бы попытаться решить проблему, определив для 
ссылок свойство аіѕр1ау со значением 1п11пе-Б1оск 
и меньшую величину 1іпе-һеівһ, например так: 


аіѕр1ау: 1п11пе-61оск; 
Богаег-Бо+от: 1рх $0114 вгау; 
1іпе-һеірһі: .9; 


Это работает — подчеркивание становится ближе 
ктексту, — но перенос слов на новую строку при этом 
работает неправильно, как демонстрирует рис. 5.23. 


Современный дизайнер мог бы попробовать при- 
менить для имитации подчеркивания внутреннюю 
тень, определяемую посредством бох -ѕһайом: 


рох-ѕһайом: 0 -1рх вгау іпѕе+; 


Однако при этом возникают те же сложности, что и с 
богдег-боїтоп, за исключением того, что подчеркива- 
ние отображается чуть ближе к тексту. Существует 
ли другой способ получать правильные, гибкие 
и поддающиеся тонкой настройке подчеркивания? 


Решение 


Часто лучшие решения можно обнаружить в самых 
неожиданных местах. В данном случае оно пришло 
в форме Басквгоипа-1таве и связанных свойств. Воз- 
можно, вы думаете, что это какое-то безумие, но про- 
явите чуточку терпения. Фоны идеально обтекают 
текст, даже когда он переносится на новую строку, 
а благодаря новым свойствам, которые мы получили 
в С$$ Васкегоипаѕ & Вог4егз І еуеі 3, таким как 
расквгоипӣ-ѕіхе, мы можем с высокой точностью 
контролировать их вид и поведение. Нам даже не 
требуются отдельные НТТР-запросы для загрузки 
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фоновых изображений, так как мы можем генериро- “Те ошу уау (о ое 


вать их на лету с помощью градиентов С55: р . а 
па оЃѓа ѓетрќѓапор 15 





раскегоипӣа: 1іпеаг-ргадйіепі(егау, вгау) 


по-гереа*; (о ме (о и.” 
Баскегоипа-ѕ5іғе: 100% 1рх; 
Баскегоипа-роѕіёіоп: 09 1.15епт; Рис. 5.25. Наши уникальные 


подчеркивания, которым 


тех - ѕһадом не дает 
Каким элегантным и ненавязчивым получается пересекать нижние выносные 


результат, можно видеть на рис. 5.24. Однако и здесь элементы букв 

есть еще потенциал для небольшого улучшения. 

Обратите внимание, как подчеркивание пересекает 

нижние выносные элементы букв р и у. Не правда ли, было бы намного лучше, 
если бы вокруг них было немного пустого пространства? Если наш фон залит 
сплошным цветом, то имитировать пустое пространство можно посредством 
двух теней +ехі- ѕһайом, также использующих сплошной цвет, совпадающий 
с цветом фона (рис. 5.25): 


Баскёгоипа: 11пеаг-вгад1еп*(вгау, вгау) по-гереа*; 
Баск5гоипа-$12е: 100% 1рх; 

Баскёгоипа-ро$11оп: 0 1.15ет; 

фехЕ-5Падом: .Өбет Ө мп1%е, -.0905ет Ө мһі+е; 


БУДУЩЕЕ. 
ПОДЧЕРКИВАНИЕ ТЕКСТА В БУДУЩЕМ 


В будущем для настройки внешнего вида наших подчеркиваний нам не при- 
дется полагаться на подобные трюки. В С55 Тех Оесогайоп 1еме! 3 (НЁр:// 
м/З.ога/ТВ/с$°-ех{-десог-3) запланировано несколько свойств специально 
для решения этой задачи, в частности: 


® Тех(-десогае1оп-со1Тог для настройки цвета подчеркиваний и других 
элементов их художественного оформления; 


ехЕ-десога1оп-$%у1е для настройки стиля оформления (например, 
сплошная линия, пунктирная, волнистая и т. п.); 


фехЕ-Чесога{1оп-$К1р для того, чтобы пропускать пробелы, нижние 
выносные элементы букв и другие объекты; 


Техї -ипаег1іпе-роѕіїіоп для тонкой настройки точного местополо- 
жения подчеркивания. 


Однако в настоящее время эти свойства практически не поддерживаются 
браузерами. 
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“Те ошу уау о се 
па оҒа ќетрќабор 15 
о уе 4 © к.” 


Рис. 5.26. Полностью на- 
строенные в соответствии 

с нашим вкусом пунктирные 
подчеркивания, для создания 
которых использовались гра- 
диенты С55 


ПОПРОБУЙТЕ САМИ! 


В решении, основанном на градиентах, лучше всего 
то, что градиенты невероятно гибкие. Например, вы 
могли бы определить пунктирное подчеркивание 
(рис. 5.26) с помощью такого кода: 


баскргоипа: 11пеаг-вга@1еп* (904ев, 

ёгау 66%, ЕгапзрагепЕ 0) гереа*-х; 
раскегоипа-ѕіғе: .2ет 2рх; 
Баскргоипа-роѕіїіоп: 0 1ет; 


Соотношение между величиной штрихов и проме- 
жутков можно контролировать с помощью позиций 
границ перехода цвета, а размер этих составляю- 
щих — с помощью свойства Баскегоипа-$17е. 


Һр://ріау.сѕѕѕесгеїѕ.іо/ипӣегііпеѕ 


В качестве упражнения вы можете попробовать создать красное волнистое 
подчеркивание, как то, которое используется для подсветки грамматических 
ошибок (подсказка: вам потребуются два градиента). Решение вы найдете 
в следующем примере из врезки «Попробуйте сами!», но, пожалуйста, поста- 
райтесь не подглядывать, не попробовав решить задачу самостоятельно, — так 
гораздо интереснее и увлекательнее! 





Благодарности 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/маму-ипегіїпеѕ 


Спасибо Марсин Вичари (Һр://агеѕіипа.огд) за первую версию 
этого эффекта (Һр://тедішит.сот/аеѕідпіпо-теаіит/сгаѓіпоііпк- 
ипае!тез-оп-тефит-7с0За92 749). 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 ВасКдгоипта$ & Вогаегѕ: һір://\3.ого/ТВ/с55-раскдгоипаѕ 


С55 Ітаде Маіиеѕ: Һр: //у3.огд/ТВ/с55-ітадеѕ 
С55 Техї ОСесогайоп: һіїр://%3.огд/ТЕ/сѕ5-(ехі-Ӣесог 


Реалистичные 
текстовые эффекты 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые навыки использования +ех{-Падом 


Проблема 


Порой определенные украшательства текста получают в Сети огромное рас- 
пространение. Например, вдавленный текст, размытие текста при наведении 
указателя мыши, объемный текст и т. д. Эти эффекты обычно строятся на 
комбинации тщательно проработанных текстовых, а также на знании того, как 
устроено наше зрение, — многие из них в той или иной степени основываются 


ГАБ | 388 


[а гаіо 






Васаоточп 5 Тек: соо: 


һѕ1(210, 13%, 40%) 2 }н$1(210, 13%, 75%) 


Разов АА ира ека (абоче - 
Тер] зәр:ог Бо абоме 14р оопа 






Рис. 5.27. При использовании подобных эффектов очень легко позабыть о доступности 
текста, так что никогда не ленитесь тестировать степень контрастности оформления 
(удобный инструмент для этого вы найдете на странице ћір://Іеауегои.дїһћиб.іо/сопігаѕі-гайо; 
он принимает все поддерживаемые С55 цветовые форматы) 
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на оптических иллюзиях. Если вам уже известны используемые трюки, то со- 
здавать такие эффекты очень легко, однако они не всегда поддаются простому 
обратному декодированию посредством инструментов разработки. 


Секрет посвящен созданию подобных эффектов, для того чтобы вы никогда 
больше не задавались вопросом: «Как вообще это работает?!> 


Эффект вдавленного текста 


Эффект вдавленного текста — один из самых по- 
пулярных на веб-сайтах со скевоморфным ди- 
зайном. И хотя скевоморфный дизайн уже не так 
популярен, как когда-то, у него всегда будут свои 
верные поклонники. 


Этот эффект лучше всего работает на умеренно 
светлом фоне с темным текстом, но его можно при- 
менять и к светлому тексту на темных фонах, если 
только текст не на 100% черный, а фон не на 100% 
белый или черный. 





Рис. 5.28. Эффект В его основе тот же замысел, который используется 
ВЮ ко, со времен первых графических интерфейсов поль- 
реализованный для темного зователя для создания впечатления вдавленных 

шрифта на более светлом 
| или выпуклых кнопок: более светлая тень внизу 

фоне (вверху: до, внизу: 

после) (или темная наверху) создает иллюзию, что объект 
выгравирован на основной поверхности. Схожим 
образом более темная тень внизу (или светлая на- 
верху) создает иллюзию того, что объект выдавлен из основной поверхности. 
Причина, почему это работает, кроется в том, что мы обычно предполагаем 
наличие источника света наверху: таким образом, выпуклый объект должен 
отбрасывать тень вниз, а выгравированный объект должен быть освещен снизу. 


В качестве точки отсчета давайте возьмем цвета с рис. 5.28. Цвет текста здесь — 
һѕ1(210, 13%, 30%), а цвет фона — һѕ51(210, 13%, 60%): 


Баскёгоипа: һ51(210, 13%, 60%); 
со1ог: һ51(210, 13%, 30%); 


Когда мы используем темный шрифт на более светлом фоне (как в предыдущем 
примере), наилучшим образом обычно работает светлая тень внизу. Насколько 
светлая — зависит от конкретных цветов, работающих в вашем дизайне, а также 
от того, насколько заметным должен получиться эффект. Поэкспериментируй- 
те с параметром альфа-канала, чтобы добиться наиболее привлекательного 
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результата. В нашем примере мы остановились на 
80% белом, но в вашем решении значения могут быть 
совершенно иными: 


Баскёгоипа: һ51(210, 13%, 60%); 
со1ог: ћ51(210, 13%, 30%); 
техі-ѕһайом: 0 1рх 1рх һѕ1а(0,0%,100%,.8); 


Результат вы можете видеть на рис. 5.28. В данном 
случае для создания эффекта мы использовали зна- 
чения в пикселах, а не в единицах ет, однако если 
в вашем дизайне текст может быть любого размера, 
от крошечных до огромных букв, то вам лучше по- 
дойдут единицы длины еп: 


+ехі-ѕһайом: Ө .ӨЗет .ӨЗет һѕ1а(0,0%,1007, .8); 


Что произойдет, если у нас будет светлый текст на 
темном фоне? Тень, определяемая в фрагменте кода 
выше, приводит к ужасным результатам в случае, 
когда цвета меняются местами, из-за чего текст 
выглядит расплывшимся (рис. 5.29). Означает ли 
это, что эффект вдавленного текста в данном слу- 
чае применить невозможно? Нет, это всего лишь 
означает, что необходимо немного скорректировать 
подход. В подобных ситуациях темная тень наверху 
работает лучше, что подтверждает рис. 5.30. С$$-код 
выглядит так: 


Баскёгоипа: һ51(210, 13%, 40%); 


со1ог: ћ51(210, 13%, 75%); 
техі-ѕһайом: Ө -1рх 1рх Б1аск; 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесге(ѕ.іо/Іеегргеѕѕ 


Текст с обводкой 
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Рис. 5.29. Эффект вдавлен- 
ного текста сломался: мы по- 
пробовали применить преды- 
дущее решение к тексту, 
цвет которого светлее цвета 


фона 


“Гће опіу мау (о сеї 
па оГа (« шриапоп 15 


(О ле] (О 1 


Рис. 5.30. Эффект вдавлен- 
ного текста при использова- 
нии светлого цвета шрифта 

на темном фоне (вверху: до, 


внизу: после) 


В будущем создавать текст с контуром/обводкой будет намного проще, так как 
мы сможем использовать параметр размазывания свойства %ех*-зПадом, делая 
тени крупнее и превращая их в подобие обводки — аналогично тому, как мы 
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Рис. 5.31. Текст с настоящей 
обводкой, созданной 

с помощью параметра 
размазывания свойства +ех+- 
эНадом 


Св 


Рис. 5.32. Ложный контур 
толщиной 1рх, созданный 
путем наложения друг на 
друга нескольких теней +ех+- 
ѕһайом 








Рис. 5.33. Ужасная обводка 
толщиной Зрх, созданная 

с помощью нескольких теней 
тех - ѕһайом с разными 
значениями смещения 


имитируем контуры посредством размазывания бох- 
ѕһадом. К сожалению, поддержка браузерами этого 
параметра в настоящее время очень ограниченна, 
и нам приходится полагаться на другие способы 
имитировать обводку, дающие более или менее при- 
емлемые результаты. 


Самый распространенный способ — накладывать 
друг на друга несколько теней +ех%-зпадом с немного 
отличающимися значениями смещения, например 
так (результат см. на рис. 5.32): 


баскегоипа: деерріпк; 

со1ог: мһі+е; 

Тех-ѕһайом: 1рх 1рх БЬ1аск, -1рх -1рх Б1Таск, 
1рх -1рх Б1аск, -1рх 1рх БЬ1аск; 


В качестве альтернативы можно было бы исполь- 
зовать несколько слегка размытых теней без сме- 
щения: 


Техі-ѕһайом: 0 09 1рх Б1аск, 0 0 1рх Б1аск, 
90 90 1рх Б1аск, 9 0 1рх Ь1аск, 
90 0 1рх Б1аск, 0 0 1рх Б1аск; 


Однако это не всегда позволяет получить визуально 
привлекательные результаты, к тому же это более 
дорогостоящий с точки зрения производительно- 
сти способ, поскольку размытие больше нагружает 
системные ресурсы. 


К сожалению, чем толще обводка, тем хуже получа- 
ются результаты каждого из этих решений. Напри- 
мер, взгляните, как некрасиво смотрится обводка 
толщиной зрх (рис. 5.33): 


Баскёгоипа: деерріпк; 

со1ог: мһі+е; 

Техї-ѕһайом: Зрх Зрх Б1аск, -Зрх -Зрх Б1Таск, 
Зрх -Зрх Б1аск, -Зрх Зрх Б1аск; 


Конечно, для решения задачи всегда можно при- 
бегнуть к помощи формата ЗУС, но он сильно за- 
мусоривает разметку. Предположим, что мы хотим 
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использовать код 5УС для стилизации заголовка первого уровня. НТМІ -код 
будет выглядеть так: 


$\С 


<11><5\5 міаёһ="2ет" һеівһё="1. 2ет" > 
<иѕе х11пК:Иге{="#с$5" /> 
<фехе 149="с55" у="1ет" >С55</+ехі> 
</5%6></һ1> 


А С55-код придется написать примерно такой: 


һ1 { 
Ғоп: 500%/1 Коскме11, ѕегі#; 
баскегоипа: деерріпк; 
со1ог: мһі+е; 


} 
һ1 +ехі { 

+111: сиггепЕСо1ог; 
} 


һ1 5\у& { омегҒ10м: \15161е } 


№1 иѕе { 
Ѕігоке: Б1аск; 
Ѕгоке-міаёһ: 6; 
Ѕѕігоке-1іпејоіп: гоипа; 


Точно не идеальный вариант, но он дает наилучшие 
визуальные результаты (рис. 5.34), и даже в древних 
браузерах, которые не поддерживают ЗУС, текст все 
так же остается читабельным, красиво стилизован 
и распознается программами чтения экрана. 





Рис. 5.34. Использование 
$\С для создания красивой 
Бр: //р1ау.с$55есге(5.10/гоке@-вехё толстой обводки 


ПОПРОБУЙТЕ САМИ! 


Сияющий текст 


Сияние — довольно распространенный эффект. Часто так отображаются ссыл- 
ки при наведении на них указателя мыши или же заголовки на определенных 
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Рис. 5.35. Сияющий текст, 
созданный с помощью двух 
простых теней сехї- ѕһайом 


"”Ріг=у 


Рис. 5.36. Псевдоразмытый 
текст; такой эффект 
получается благодаря тому, 
что сам текст скрывается, 

а отображаются только 

его тени 


веб-сайтах. Кроме того, это один из самых легких 
в создании эффектов. В своей простейшей форме 
он требует всего лишь парочки наложенных друг на 
друга теней ёех+ -ѕһайом безо всяких СДВИГОВ И ТОГО 
же цвета, что и основной текст (рис. 5.35): 


баскегоипа: #203; 
со1ог: #ҒҒс; 
Техі-ѕһайом: 0 09 .1ет, 0 Ө .Зеп; 


Если вы создаете эффект для состояния ссылки, 
когда на нее наводится указатель мыши, то нужно 
также добавить переход, например так: 


а { 
раскегоипа: #203; 
со1ог: мһі+е; 
ёгапѕіёіоп: 15; 


} 
а:һомег { 

Тех -ѕһайом: 0 9 .1ет, 90 90 .Зепт; 
} 


Вы можете определить еще более интересный эф- 
фект, скрывая сам текст при срабатывании :һохег и, 
по сути, создавая иллюзию того, что буквы плавно 
расплываются (рис. 5.36): 


а { 
раскегоипа: #203; 
со1ог: мһі+е; 
ёгапѕіёіоп: 15; 
І 
а:һомег { 
со1ог: іғапѕрагеп+; 
Техі-ѕһайом: 9 Ө .1ет мһіте, 9 Ө „Зет мһі+е; 
} 


Однако помните, что зависимость от ёехі- ѕ$пайом 
в вопросе отображения текста таит в себе опасность: 
у этого решения нет элегантного обходного пути. 
Если +ех+-ѕһайом не поддерживается, то вообще ни- 
какой текст визуализирован не будет. Таким образом, 
необходимо проявлять осторожность и применять 
это только в тех окружениях, которые поддержива- 
ЮТ ехі-ѕһайом. Или же размывать текст с помощью 
фильтров С$5: 
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а { 
раскегоипа: #203; 
со1ог: мһі+е; 
їгапѕі+іоп: 15; 


} 
а:һомег { 

Ғі1#ег: Б1иг(.1ет); 
} 
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Возможно, в этом варианте поддержка браузерами будет хуже, но, по крайней 
мере, ничего не сломается, если поддержка будет отсутствовать вовсе. 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесгеїѕ.іо/9іом 


Объемный текст 


Еще один популярный (пожалуй, даже слишком) 
эффект скевоморфного дизайна — это объемный 
текст (рис. 5.37). Главная идея заключается в ис- 
пользовании большого количества наложенных друг 
на друга теней: каждая чуть темнее предыдущей, 
без размытия и со сдвигом только на 1рх. В самом 
же низу «стопки» должна находиться сильно раз- 
мытая темная тень, имитирующая тень, которую 
отбрасывала бы вся эта конструкция. 


Давайте возьмем в качестве отправной точки текст 
на рис. 5.38, для стилизации которого применяется 
этот простой С55-код: 


Баскёгоипа: #58а; 
со1ог: мһі+е; 


Теперь добавим несколько теней ех - ѕ$һадом, по- 
степенно делая их темнее: 


баскегоипа: #58а; 

со1ог: мһі+е; 

техі-ѕһайом: Ө 1рх һ51(0,0%,85%), 
Ө 2рх һ51(0,0%,80%), 
Ө Зрх ћ51(0,0%,75%), 
Ө 4рх ћ51(0,0%,70%), 
Ө 5рх 1$1(0,0%,65%); 





Рис. 5.37. Объемный текст, 
созданный посредством 
наложения друг на друга 
нескольких теней +ех{- 
эНадом 





Рис. 5.38. Наша отправная 
точка 
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Рис. 5.39. Почти готово, но 
еще не совсем реалистично 


ВЕТКО 


бурадларйу, 





Рис. 5.40. Оформление 
в ретростиле 


5С55 


Как видно на рис. 5.39, мы уже приближаемся к же- 
лаемому результату, но эффект все еще смотрится 
недостаточно реалистично. Верите или нет, но для 
того, чтобы достичь результата, показанного на 
рис. 5.37, нам нужно всего лишь добавить еще одну 
тень внизу: 


Баскёгоипа: #58а; 
со1ог: мһі+е; 
Техі-ѕһайом: Ө 1рх һ51(0,0%,85%), 
9 2рх һ51(0,0%,80%), 
Ө Зрх ћ51(0,0%, 75%), 
Ө 4рх ћ51(0,0%,70%), 
Ө 5рх һ51(0,0%,65%), 
Ө 5рх 1@рх Б1аск; 


Такой повторяющийся громоздкий код — первый 
кандидат на преобразование в препроцессорную 
примесь. Один из вариантов, как это можно было 
бы сделать в 5С$$, показан далее: 


@тіхіп ТехЕ-34($со1ог: иП1е, $аерёһ: 5) { 


$5падом$: (); 


$ѕһааом-со1ог: $со]1ог; 


@Ғог $1 Ғгот 1 ©һгоиРһ $аер&һ { 
$ѕһадом-со1ог: дагкеп(%ѕ5һааом-со1ог, 10%); 
$ѕһайомѕ: аррепа($$Падом$ , 
Ө ($1 * 1рх) $ѕһайом-со1ог, сотта); 


} 


со1ог: $со1ог; 


техі-ѕһайом: аррепа($$Падом$ , 
Ө (%аерһ * 1рх) 10рх Б1аск, сотта); 


} 


№1 { @іпс1иде +ехі-3а(#еее, 4); } 


Существует множество вариаций этого эффекта. Например, если сделать все 
тени черными (цвет Б1аск) и убрать последнюю размытую тень, то можно 
имитировать эффект вдавленного текста, часто используемый для имитации 
старых табличек или оформления их в ретростиле (рис. 5.40): 
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со1ог: мһі+е; 

Баскёгоипа: һ51(0,50%,45%); 

ехі-ѕһайом: 1рх 1рх Б1аск, 2рх 2рх Б1аск, 
Зрх Зрх Б1аск, 4рх 4рх БЬ1аск, 
5рх 5рх Б1аск, брх брх Б1аск, 
7рх 7рх Б1аск, 8рх 8рх Б1аск; 


Этот вариант проще преобразовать в примесь или — что в данном случае более 
удобно — в функцию: 


5С55 


@Ғипсёіоп фехЕ-гего($со1ог: Б1аск, $ӣерёһ: 8) { 
$ѕһайомѕ: (1рх 1рх $со1ог,); 
@Ғог $1 Егот 2 &һгоиеһ $аер+һ { 
$ѕһайомѕ: аррепа(%ѕһаЯомѕ, 
($1*1рх) ($1*1рх) $со1ог, сотта); 


$ 
@гефигп $ѕһайомѕ; 
} 
һ1 { 
со1ог: мһіїе; 
Баскёгоипа: һ51(0,50%, 45%); 
+ехі-ѕһайом: бех -геЁго(); 
} 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Техі ОесогаНоп: ВЁр://м/З.ога/ТВ/с$$-ех{-4есог 


28 Текст по кругу 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые знания формата 5\/С 


Проблема 


Хотя это не самый распространенный эффект, иногда возникает необходимость 
вывести короткую строку текста вдоль дуги окружности. Но, сталкиваясь с та- 
ким требованием, мы осознаем, что помощи от С$5 ждать не приходится. Не 
существует свойства или функции С$$, позволяющей изгибать строки текста 
таким способом, а те основанные на С$$ решения, до которых нам удается 
додуматься, выглядят настолько грязными, что неловко даже упоминать их. 
Существует ли способ воплотить этот эффект, не прибегая к помощи изобра- 
жений и не теряя душевного равновесия и самоуважения? 


Решение 


Есть несколько сценариев, помогающих решить эту задачу. Принцип их работы 
заключается в том, что каждая буква оборачивается в отдельный элемент <зрап> 
и эти элементы по отдельности поворачиваются, что позволяет сформировать 
окружность. Но это не только ужасно грязный трюк, он вдобавок непомерно 
раздувает код и добавляет на страницу десятки ОО М-элементов, не имеющих 
практической ценности. 


л Вигтлзн Вову/Вли.5 РЕУЕГОРЕК 
УТТН А РЕМСНАМТ РОК ТУЕЕР, РІХЕ 
СОЕРЕЕ, АМР НОМЕВКЕҰІХС. 


Мел пос жогкіпе бог сЦегиз, І Һеір ограпізе # 


Табо оссаѕіопаПу ѕрегк аг 
икеглапопа| сопќегеосез оп е іпсегѕесіоп ой 
. ргорташииов арі гоБойсе. Іо ће разг, Гуе 
| жогкей аз а Ѕузќетз Реуеіорет ас'Тће Јпіуегзісу 
‹ } #ог буе уеагз. Моге гесепіу, І жаз ће 
| Тезі Оеуеіорег аг Ако, 
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Рис. 5.41. Текст выводится вдоль дуги окружности на кнопках, напоминающих пуговицы, на веб- 
сайте ћір://јиіапсһеаіІ.со.ик. Обратите внимание, что это единственный способ добавить текст на 
кнопки, не сломав метафору пуговиц, ведь центр кнопки занят отверстиями и нитками 


Идеального способа достичь желаемого результа- 
та с помощью чистого С$$ не существует, но мы 
можем с легкостью создавать подобные дизайны, 
используя немного строкового $УС. Формат 5УС 
всегда поддерживал отображение текста вдоль любо- 
го пути, адуги окружности — это всего лишь один из 
вариантов формы пути. Почему бы не попробовать? 


Простейший способ нарисовать текст по кругу с по- 
мощью $УС — поместить его в элемент <+ех+Ра+ћ»> 
внутри элемента <+ех+>. Элемент <‹+ехїРаїһ> также 
ссылается на элемент <раей>, определяя форму пути 
по его идентификатору. Текст внутри строкового 
ЅҰС также наследует большую часть стилизации 
шрифтов (за исключением 1іпе-һеірһ+, так как 
это в 5УС задается вручную), поэтому, в отличие 
от решений, включающих внешние изображения 
в формате ЗУС, в данном случае о стилях можно не 
беспокоиться. 


Предположим, мы хотим вывести фразу сисшат 
теаѕопіпв вотЁ$ Бесаиѕе по кругу, чтобы она фор- 
мировала замкнутую окружность, как на рис. 5.42. 
Начнем с добавления строкового ЗУС внутри на- 
шего элемента НТМГ, а также с определения пути, 
описывающего окружность: 


К сожалению, <ехЕРаїһ> 
работает только с элементами 
<ра+һ»>, поэтому для созда- 
ния нашей окружности у нас 
не получится использовать 
гораздо более понятный эле- 
мент <с1гс1е>. 


Рис. 5.42. Конечный 
результат, которого мы хотим 
добиться 
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$\С 


<41\ с1аѕ5="сігси1аг"> 
<$\5 уіемВох="Ө 0 100 100"> 
«раһ 4="М 0,50 а 50,50 0 1,1 0,1 2" 
іа="сігс1е" /> 
</$\5> 
</діу> 


Обратите внимание, что мы определили габариты посредством уіемВох, а не 
С ПОМОЩЬЮ атрибутов міа+ћ и һеірһ+. Это позволяет настраивать систему коор- 
динат и соотношение сторон рисунка, вместо того чтобы всегда использовать 
четко определенный размер. Так не только намного компактнее; это экономит 
несколько строк С$$-кода, поскольку нам больше не приходится определять 
равную 100% ширину и высоту для элемента <ѕув> — он сам подстраивается 
под размер своего контейнера. 


Если вы не понимаете синтаксис пути, не беспокойтесь. Его вообще мало кто 
понимает, и даже те, кто был посвящен в таинство синтаксиса пути в ЗУС, чаще 
всего забывают о нем в течение нескольких минут. Если вам интересно, то вот 
три команды, которые включает этот невероятно загадочный синтаксис: 


О ме, 50: перейти в точку (0,50); 





О а 50,50 0 1,1 0,1: нарисовать дугу из точки, в которой вы находитесь в дан- 
ный момент, в точку, которая находится на ё единиц правее и на 1 единицу 
ниже вашей текущей позиции. Радиус этой дуги равен 56, как по горизонтали, 
так и по вертикали. Из двух возможных углов выбрать наибольший и из двух 
возможных дуг выбрать ту, что находится справа от двух точек, а не слева; 


О 2: закрыть путь прямым отрезком. 


Пока что наш путь представляет собой всего лишь черную окружность 
(рис. 5.43). Мы добавляем текст с помощью элементов <+ех{> и «+ех+Раїһ> 
и связываем его с нашей окружностью посредством свойства х14 пк: пгеф, как 
в следующем фрагменте кода: 


$\С 


<41\ с1аѕ5="сігси1аг"> 
<5\5 уїіемВох="Ө 0 100 100"> 
«раһ 4="М 0,50 а 50,50 0 1,1 0,1 2" 
14=" с1гс1е" /> 
<ехі><+ехіРаёһ х11пК:Иге*="#с1гс1е"> 
сігси1аг геаѕопіпе могкѕ Бесаиѕе 
< /єехїРаёһ></ехё> 
</$\5> 
</дім> 


Как видно на рис. 5.44, хотя нам предстоит еще 
немало потрудиться, чтобы сделать этот текст при- 
влекательным и читабельным, мы уже достигли 
результата, которого с помощью чистого С55 не 
сумели бы добиться и за миллион лет! 


Следующим шагом будет удаление черной заливки 
из нашего кругового пути. Мы вообще не хотим, 
чтобы какая-либо часть нашей окружности была 
видна; ее единственное предназначение — служить 
направляющей для нашего текста. Этого можно до- 
биться несколькими разными способами: например, 
поместив наш контур в элемент ‹4е+$> (придуман- 
ный как раз для этой цели). Однако при создании 
нашего эффекта мы хотим минимизировать объем 
5УС-разметки, поэтому применим решение из С55, 
а именно +111: попе: 


.сігси1аг ра { +111: попе; } 


Теперь, когда черный круг исчез, мы можем вни- 
мательнее изучить остальные недостатки. Самая 
большая проблема заключается в том, что большая 
часть текста находится за пределами ЗУС-элемента 
и обрезается им. Чтобы исправить этот дефект, 
нужно сделать контейнер меньше и применить 
к 5 УС-элементу омег+1ом: \м15161е, чтобы он не 
обрезал никакое содержимое за пределами своего 
окна просмотра: 


.сігси1аг { 
міаһ: Здет; 
һеівһё: Здепт; 


.сігси1аг $\8 { 
аіѕр1ау: Б1оск; 
омегҒ1ом: \№\1$161е; 


Результат вы видите на рис. 5.46. Это почти то, что 
нам нужно, но часть текста все равно обрезается. 
Причина втом, что на обтекание влияют только габа- 
ритные размеры $УС-элемента, но не то, насколько 
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Почему синтаксис пути в 5\/б 
такой запутанный? В те вре- 
мена, когда он разрабаты- 
вался, люди были уверены, 
что никто не будет писать 
$\с-код вручную, поэтому ра- 
бочая группа 5\/С стремилась 
к максимально компактному 
синтаксису, уменьшая размер 
файла. 





Рис. 5.43. Наш путь сейчас 
выглядит как окружность 

с цветом заливки по 
умолчанию (Б1аск) 





Рис. 5.44. Хотя предстоит 
еще немало работы, мы уже 
совершили то, на что чистый 
С55 просто не способен 
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Рис. 5.45. После того как 
мы сделали путь невидимым, 
остальные проблемы стали 
заметнее 
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Рис. 5.46. Вверху: опреде- 
ление ширины и высоты на- 
шего элемента-контейнера. 
Внизу: добавление оуег+10ом: 
\15161е 


содержимое выходит за пределы окна просмотра. 
Следовательно, тот факт, что какой-то текст пе- 
реливается через края контейнера, создаваемого 
элементом <ѕув>, не заставляет этот ЗУС-элемент 
сдвинуться вниз. Нам придется сделать это вручную, 
с помощью поля: 


.сігси1аг { 
міаёһ: Здет; 
һеівһё: ЗӘепт; 
пагвіп: Зет аи+о 0; 


.сігси1аг ѕур { 
аіѕр1ау: Б1оск; 
омегҒ10м: \1$161е; 


Вот и все! Результат выглядит в точности как на 
рис. 5.42, и распознавание текста программами чте- 
ния экрана проходит без сложностей. Если у нас 
только один фрагмент текста, нарисованного вдоль 
дуги окружности (скажем, на логотипе веб-сайта), 
то работа закончена. Но если нужно применить 
подобную стилизацию к нескольким элементам 
на странице, то хотелось бы избежать повторения 
всей этой разметки ЗУС. Для чего можно написать 
короткий сценарий, который будет автоматически 
генерировать необходимые $УС-элементы, встречая 
в разметке нечто подобное: 


НТМІ. 


<аїіу с1аѕ5="сігси1ағ"> 
сігси1аг геаѕопіпе могкѕ Бесаизе 
</аіу> 


Наш код будет проходить по всем элементам с клас- 
сом сігси1аг, удаляя их текст и сохраняя его в пе- 
ременной, а также добавляя необходимые ЗУС- 
элементы: 
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35 
$$('.с1гси1аг').КогЕасй (Фипс1оп(е1) { 
уаг № = "Пр: //ммм.м3.0г5/2000/5\5"; 
уаг х1іпк№5 = "Һр: //ммм.м3 .0г8/1999/х11пК"; 
уаг $\8 = аоситеп* . сгеаёеЕ1етепМ№5 (№5, "5\8"); 
үаг с1гс1е = адоситеп* . сгеафеЕ1ететЕ №5 (№, "раһ" ); 
уаг Тех = доситепЕ. сгеаеЕ1етепт № (№5, "%ехЕ"); 
уаг +ехЕРаЁһ = доситеп*. сгеаёеЕ1етепЕМ№5 (№, "ЕехЕРа В"); 
Ѕур. ѕеЕдёгіриёе("муіемВох", "Ө 0 100 100"); 


сігс1е.ѕе+Абёгіри+е("а", "МӨ,50 а50,50 0 1,1 Ө, 12"); 
сігс1е.ѕе+Аёёгіри+е("іа", "сігс1е"); 


ТехіРаһ.ёехЕСопёепі = е1 .ёехїіСоп+епі; 
{ехЕРаеН. ѕедёгіриёемѕ (х1іпк№5, "х1іпк:һге+", "#сігс1е"); 


ћехі .аррепасһі1а(+ех+Ра+һ); 
5\в . аррепаси11а (с1гс1е); 
5\в . аррепаСси11а (+ех*); 
е1.+ехіСоп+епі = ''; 
е1.аррепасһі1а(ѕур); 


}); 


ПОПРОБУЙТЕ САМИ! 


Һ&р://рІау.сѕѕѕесгеїѕ.іо/сігсшаг-ёехё 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
ЅсаіаБіе Месїог Сгарһісѕ (5%6): НЕ р://м3.ога/ТВ/$\С 


Взаимодействие 
с пользователем 





Выбор правильного 
указателя мыши 


Проблема 


Назначение указателя мыши — не просто показывать, в какой точке экрана 
находится курсор, но также сообщать пользователю, какие действия ему до- 
ступны. Об этой распространенной практике проектирования пользовательских 
интерфейсов настольных приложений в веб-приложениях часто забывают. 


Но вина лежит не только на разработчиках. Во времена С$$ 2.1 у нас попросту 
не было доступа ко многим встроенным курсорам. В основном мы использовали 
свойство сиг5ог для указания, что на чем-то можно щелкнуть, дополняя его 
курсором роіпќег, или же иногда добавляли всплывающие подсказки с помощью 
курсора һе1р. Некоторые также применили курсоры маі+ и рговгеѕѕ вместо или 
в дополнение к указателю загрузки. Но этим дело и ограничивалось. И хотя 
в С$5$ Оѕег Іпќегѓасе Т еуе1 З (һёр://№у3.ого/ТА/сѕ53-и/#сигѕог) мы получили целую 
пачку новых встроенных курсоров, большинство разработчиков продолжают 
в этом вопросе придерживаться старых привычек. Как это часто бывает при 
работе над взаимодействием с пользователем, вы в действительности не осо- 
знаете существования проблемы до тех пор, пока не сталкиваетесь с решением. 
Позвольте мне показать вам эти решения! 


Решение 


Полный список новых встроенных курсоров представлен на рис. 6.2, а прочитать 
об их предназначении вы можете в спецификации. Понятно, что необходимость 
в таких курсорах существует далеко не во всех веб-приложениях. Например, 
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в набор входит даже курсор се11, «указывающий, что ячейка или набор ячеек 
могут быть выделены». Сложно вообразить себе применение подобного курсора 
за пределами электронных таблиц и редактируемых сеток. 


ВЕ 
сгоѕѕһаіг 

















5уу-геѕіе 








Рис. 6.1. Набор встроенных курсоров в С55 2.1 был довольно ограниченным (курсоры показаны 
в том виде, как они отображаются в ОЗ Х) 


Я не ставлю себе целью посредством этого секрета предложить вам исчер- 
пывающее руководство по возможным вариантам использования всех этих 
новых курсоров. Однако некоторые из них действительно весьма примеча- 
тельны и способны моментально повысить удобство использования большого 
числа веб-приложений, а вам для этого потребуется добавить совсем немного 
кода. 
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Рис. 6.2. Новые встроенные курсоры, которые мы получили в рамках С55 Џѕег Іпќегѓасе еме! 3 
(ВЕр:// м3.ого/ТВ/с553-и1/#сигѕог) (курсоры показаны в том виде, как они отображаются в О5 Х) 


Обозначение нерабочего состояния 


Возможно, наиболее полезным среди новинок является курсор поє-а11омеа 
(рис. 6.3). Он чрезвычайно полезен для указания того, что взаимодействие 
с определенным элементом управления невозможно по той или иной при- 
чине — чаще всего потому, что элемент управления отключен. Сегодня, когда 
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большинство форм на веб-страницах подвергаются масштабной стилизации, 
зачастую бывает трудно отличить доступный элемент управления от недо- 
ступного, и подобный курсор становится просто незаменимым помощником. 


Никакой особой настройки он не требует: 


:аіѕаб1еа, [4іѕар1еа], [агіа-діѕаЬ1еа="©гие"] { 
сигѕЅог: по{-а11омеа; 


} 


ПОПРОБУЙТЕ САМИ! 
ВЕр://р!ау.с555есге10/@аЫеч 


Скрывание курсора 


Невидимый курсор звучит как ночной кошмар 
инженера по удобству использования. Как кому- 
то вообще может прийти в голову такое и почему 
веб-стандарты упрощают для подобных людей эту 
задачу? Прежде чем вы начнете поносить людей, 
очевидно, испытывающих личную субъективную 
неприязнь к удобству в использовании, вспомните, 
как вы пытались пользоваться этими ужасными 
общественными сенсорными экранами (например, 
в информационных будках или на дисплеях, встро- 
енных в сиденья самолета), а разработчики забывали 
спрятать указатель мыши, и этот несчастный курсор 
болтался по экрану, замирая в самых неудобных 
местах. Или как вам приходилось перемещать мышь 
к правому краю экрана во время просмотра видео, 
потому что курсор настырно висел прямо поверх 
картинки. 


Очевидно, существует множество сценариев исполь- 
зования, в которых скрывание курсора способно 
улучшить впечатление пользователя от взаимо- 
действия с интерфейсом. Вот почему среди новых 
ключевых слов для курсора появилось попе. Скры- 
вать курсор можно было ив С5$ 2.1, но для этого 
требовалось прозрачное изображение в формате СТЕ 
размером 1х1, вот так: 


Виїќор 


Рис. 6.3. Использование 
курсора поё-аПомеа 

в качестве подсказки, 
что элемент управления 
отключен 


Если вы скрываете 
Ө курсор, когда он на- 

ходится поверх видео, 
убедитесь, что не скроете его 
случайно, когда он окажется 
над элементами управления. 
В противном случае этим усо- 
вершенствованием вы причи- 
ните больше вреда, чем при- 
несете пользы. 
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уідео { 
сиг$ог: иг] (+гапзрагеп* .в1+); 
} 


Сегодня нам подобные хитрости не требуются, так как мы можем использовать 
простое сигзог: попе. Однако обеспечить обходной путь часто бывает полезно, 
так как не все браузеры еще поддерживают курсоры Г.еуе! 3. Это легко сделать 
с помощью каскадных стилей: 


сигѕог: иг] ( '{гапзрагеп* .21+'); 
сигѕог: попе; 





Расширение области, 
реагирующей на щелчок мыши 


Проблема 


Если вы интересуетесь вопросами взаимодействия СОВЕТ 

с пользователем, то наверняка слышали о законе пронаблюдать закон Фиттса 
Фиттса. Впервые предложенный американским в действии посредством ин- 
психологом Полом Фиттсом (Раш Еіёёѕ) еще терактивной визуализации вы 
в 1954 году, закон Фиттса гласит, что время, необ- можете на странице Һіїр:// 
ходимое для быстрого перемещения в целевую — УТопмапега/ехуй и. 
область, представляет собой логарифмическую 

функцию отношения между расстоянием до цели 

и шириной цели. Его наиболее часто используемая математическая формули- 


ровка выражается как Т =а+6105, Е + р) ‚ где Г — затраченное время, Р — рас- 


стояние до центра цели, ү — ширина цели, ааи р — константы. 


Хотя графические интерфейсы пользователя в то время еще не существовали, 
закон Фиттса распространяется в том числе и на координатно-указательные 
устройства, а сегодня стал самым известным принципом человеко-машинного 
взаимодействия (Нитап-Сотриќег Пкегасйоп, НСІ). Возможно, поначалу это 
может казаться чем-то удивительным, но помните, что закон Фиттса в большей 
степени относится к человеческим моторным навыкам, чем к конкретному 
аппаратному обеспечению. 


Очевидное следствие данного закона состоит в том, что чем больше цель, тем 
проще в нее попасть. Следовательно, расширение области, реагирующей на 
щелчки мыши (области попадания), вокруг небольших элементов управле- 
ния, с которыми в противном случае может быть сложно взаимодействовать 
(а увеличить их невозможно), зачастую повышает удобство использования. 
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Это становится тем важнее, чем большую популярность завоевывают сенсорные 
экраны. Никому не нравится тыкать пальцем в экран десять раз подряд, что- 
бы попасть в эту мерзкую маленькую кнопочку, и все же подобные ситуации 
возникают каждый день. 


В других сценариях мы хотим, чтобы элемент выдвигался, когда пользователь 
подводит указатель мыши к краю окна, — как, например, в случае с автомати- 
чески скрываемым заголовком, который выскальзывает из-под верхней кромки 
при приближении указателя мыши. Это также включает необходимость уве- 
личения области попадания (но только в одном направлении). Возможно ли 
это средствами чистого С55? 


Решение 


Ө Предположим, что у нас есть простая кнопка, на- 
пример как показанная на рис. 6.4, и мы хотим 


увеличить ее область попадания на 10рх во всех 
направлениях. Мы уже применили к ней некото- 
рую стилизацию, а также добавили курсор сигзог: 
Рис. 6.4. Наша отправная роіпёег, который не только обеспечивает возмож- 
точка!с.двумя состояниями: ность! взаимодействия с помощью мыши, нои по- 
когда курсор находится на 2 
кнопке (справа) и когда он могает проверить, где действительно начинается 
находится ниже ее (слева) область попадания. 


Самый простой способ расширить область попада- 

ния — создать прозрачную сплошную рамку, так как, 
в отличие от контуров и теней, взаимодействие мыши с рамками заставляет 
срабатывать события мыши на элементе. Например, для расширения области 
попадания элемента на 10рх во всех направлениях достаточно такого простого 
кода: 


Богаег: 10рх $0114 +гапзрагеп*; 


Однако, как видно на рис. 6.5, это плохое решение, так как оно заставляет 
нашу кнопку увеличиваться! Причина кроется в том, что фоны по умолчанию 





' В сфере удобства использования термин «возможность» (а//ют4апсе) обозначает, что эле- 
мент управления дает очевидную видимую подсказку о том, каким образом мы можем 
с ним взаимодействовать. Например, объемный вид кнопки подсказывает, что на кнопку 
можно нажать, а вид дверной ручки намекает, что за нее можно потянуть или повернуть 
ее. Подробнее об этом вы можете прочитать в статье ћёрѕ://ги.мікіреаіа.ого/мікі/Возможности 
(или ее английском варианте Һрѕ://еп.мікіреаіа.ого/\мікі/А#огаапсе). Среди профессионалов 
не прекращаются дискуссии, следует ли считать изменение формы указателя мыши воз- 
можностью или визуальным ответом. 
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растягиваются на размер рамки. Старое доброе свой- 
ство Басквгоџпа-с1ір помогает ограничить фон пред- 
назначенным специально для него пространством: 


Богаег: 10рх $0114 +гапзрагеп*; 
Баскегоипа-с1ір: рада1т=-Бох; 


Как подтверждает рис. 6.6, это решение прекрасно 
работает. Но только до тех пор, пока у вас не возник- 
нет необходимость создать настоящую рамку вокруг 
кнопки и вы не поймете, что уже использовали един- 
ственную доступную вам рамку для расширения 
области попадания. Что же делать? Все просто: вы 
можете имитировать (сплошную) рамку с помощью 
внутренней тени (рис. 6.7): 


Богаег: 10рх $0114 +гапзрагеп*; 
Бох-ѕһайом: Ө Ө Ө 1рх греБа(0,0,0,.3) іпѕеї; 
раскегоипа-с1ір: раадіпр -бох; 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесге(ѕ.іо/һіё-агеа-Богаег 


В отличие от рамок, при использовании бох- ѕһайом 
вовсе не обязательно ограничиваться одной те- 
нью, так что если вам требуется больше, то просто 
перечислите наборы параметров для нужных теней 
через запятую. В то же время, сочетая внутрен- 
ние и внешние тени, мы получаем очень странный 
эффект, потому что внешние тени рисуются за 
пределами поля рамки. Например, вполне логично 
попробовать что-то вроде решения из следующего 
фрагмента кода, для того чтобы добавить настоящую 
размытую тень, заставляющую кнопку «выпирать» 
из страницы (еще одна деталь, указывающая на то, 
что на кнопке можно щелкнуть): 


Бох-ѕһайом: 0 0 Ө 1рх грБба(0,0,0,.3) іпѕе+, 
Ө .1ет .2ет -.05ет грра(0,0,0,.5); 


Но если применить эту стилизацию, результат будет 
совершенно не похож на ожидаемый (рис. 6.8). Это 





Рис. 6.5. Ой! Увеличив об- 
ласть попадания с помощью 
Богаег, мы также сделали 
крупнее саму кнопку 


Рис. 6.6. Возвращаем нашей 
кнопке нормальный размер 
с помощью Баскагоипа-сйр 


Рис. 6.7. Использование 
внутренней тени Бох-ѕһћайоу 
для имитации рамки 
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решение Далеко от идеала и по другим причинам. 


Ө Рамки влияют на разметку, что в определенных 
случаях может быть неприемлемо. Что же делать? 
— ~ Можно удалить рамку и воспользоваться преиму- 


ществом того факта, что псевдоэлементы также 
захватывают взаимодействия с мышью, опреде- 
Рис. 6.8. Добавление ленные для их родительских элементов. 


настоящей тени плохо 


работает с этим решением Затем мы можем наложить на нашу кнопку прозрач- 


ный псевдоэлемент, превышающий ее по размеру на 
10рх в каждом направлении: 


Би++оп { 
роѕіїёіоп: ге1аїіхе; 
/* [остальные стили] */ 


} 
Биё+оп: : Бефоге { 
сопфеп*: ''; 
роѕіёіоп: аб5о1ие; 
Фор: -1@рх; гірһё: -10рх; 
роот: -10рх; ІеҒЕ: -10рх; 
} 


Это прекрасно работает, и пока ни один из псевдоэлементов больше никак не 
используется, эта кнопка ничему не мешает. Решение с псевдоэлементом необы- 
чайно гибкое — мы могли бы создать область попадания любого размера и фор- 
мы и влюбом месте, где только пожелаем, даже в стороне от самого элемента! 


ПОПРОБУЙТЕ САМИ! 


НЕр://р!ау.сз55есге(5.10/И-агеа 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Васкдгоипаѕ & Вогаегѕ: һір://\3.ого/ТВ/с55-раскдгоипаѕ 


З 1 Уникальные флажки 


Проблема 


Дизайнеры всегда хотят иметь полный контроль Для удобства чтения мы 
над всеми элементами веб-страницы. Когда графи- в этом секрете оперируем по- 
ческого дизайнера, имеющего ограниченный опыт нНяТием «флажок» (сһескбох), 
работы с С$$, просят создать макет веб-сайта, он НО 210 Описание в равной сте- 
пени применимо как к флаж- 
практически всегда создает макет с уникальными 
кам, так и к переключателям 
стилизованными элементами управления форм, чем (гад БиНоп), если только 
вгоняет в тоску разработчика, задача которого — явно не указано иное. 


перевести этот рисунок на язык С55. 


Когда каскадные таблицы стилей С$5 только появились, предлагаемая стили- 
зация форм была очень ограниченной, и по сей день четкого определения этих 
элементов ни в одной из многочисленных спецификаций С$$ не существует. 
Однако с годами браузеры получили больше свободы в том, какие свойства 
С$$ допускается использовать с элементами управления форм, благодаря чему 
мы теперь в вопросах стилизации большинства из них можем чувствовать себя 
ДОВОЛЬНО ВОЛЬГОТНО. 


К сожалению, флажки и переключатели не относятся к вышеупомянутому боль- 
шинству. По сей день большая часть браузеров допускает лишь минимальную 
их стилизацию или вообще не поддерживает стили для этих элементов форм. 
В результате разработчикам приходится либо мириться с их представлением 
по умолчанию, либо прибегать к ужасным трюкам, затрудняющим доступ к со- 
держимому веб-страниц, таким как воссоздание этих элементов с помощью 
блоков а1\ и сценариев Јауа$сгірі. 


Существует ли способ обойти подобные ограничения и настроить внешний 
вид флажков, не раздувая код и не жертвуя семантикой и доступностью со- 
держимого? 
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СОВЕТ 


Задаетесь вопросом, в чем от- 
личие псевдокласса : сһескеа 
от селектора по атрибутам 
[сһескеа]? Последний не 
обновляется в результате 
взаимодействия с пользовате- 
лем, так как взаимодействие 
с пользователем не способно 
повлиять на атрибут НТМЕ. 


Вложив флажок внутрь тега 
метки, мы бы смогли изба- 
виться от необходимости ис- 
пользовать идентификаторы, 
но в этом случае у нас не 
было бы возможности об- 
ращаться к конкретной метке 
в зависимости от состояния 
флажка, так как родительских 
селекторов у нас пока что 
нет. 
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Решение 


До недавнего времени решить эту задачу без помощи 
сценариев было невозможно. Однако в З@есвог$ 
Геуе! З (п&р://мЗ.ога/ТВ/с$$3-з@!еског5) мы получили 
новый псевдокласс: : сһескеа. Этот псевдокласс 
успешно проходит проверку на соответствие только 
в том случае, когда флажок отмечен — либо пользо- 
вателем, либо посредством сценария. 


Оннеслишком полезен в применении непосредствен- 
но к флажкам, поскольку, как мы уже упоминали 
выше, с флажками можно использовать не так много 
свойств С5$. Однако мы всегда можем прибегнуть 
к помощи комбинаторов для стилизации других 
элементов в зависимости от состояния флажка. 


Возможно, вы спрашиваете себя, стили каких других 
элементов мы можем захотеть менять в зависимости 
от того, отмечен флажок или нет. Что ж, существует 
тип элемента, демонстрирующий особое поведе- 
ние в привязке к флажкам, и это <1аБе1>. Элемент 
<1абе1>, связанный с флажком, также выполняет 
функцию переключателя для этого флажка. 


Поскольку метки (/аре/), в отличие от флажков, 
не являются подменными элементами,! мы можем 
добавлять к ним генерируемое содержимое и на- 
страивать их стили в зависимости от состояния 
флажков. Таким образом, можно скрыть настоящие 
флажки, сделав это так, чтобы не нарушить порядок 
табуляции, и вместо этого заставить генерируемое 
содержимое играть роль стилизованных флажков! 


Давайте посмотрим на это решение в действии. 
Начнем со следующей простой разметки: 


НТМЕ 


<1приф +уре="сһескбох" 14="амезоте" /> 
<1аре1 Ғог="алеѕоте" >Амезоте ! < /1абе1 > 


Из спецификации С$$ 2.1: < Подменный элемент — это] элемент, содержимое которого 


выходит за рамки модели форматирования С$$, например изображение, встраиваемый 
документ или апплет». К подменным элементам невозможно применять генерируемое 
содержимое, хотя некоторые браузеры и поддерживают такую функциональность. 
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Следующий шаг заключается в генерировании 
псевдоэлемента, который будет использоваться 
в качестве нашего стилизованного флажка, и его 
простейшей стилизации: 


іпри[+уре="сһескбох"] + 1аБе1: : Бефоге { 
сопфепе: '\а0'; /* неразрывный пробел */ 
аіѕр1ау: 1п11пе-61оск; 
уег{1са1-а112п: .2ет; 
міаёһ: . Зет; 
һеівһё: .8ет; 
пагеіп-гірһё: .2ет; 
рогдег-гаӣіиѕ: .2ет; 
баскегоипа: $11\ег; 
Техі-іпаепі: .15ет; 
1іпе-һеірһё: .65; 


Нарис. 6.9 показано, как сейчас выглядят наш фла- 
жок и метка. Оригинальный флажок все еще ото- 
бражается на экране, но позднее мы скроем его. 
Теперь нам нужно создать другой стиль, который 
будет применяться к флажку, когда тот отмечен. 
Для начала хватит другого цвета и символа галочки 
в качестве содержимого: 


іпри[+уре="сһескбох" ] : сһескеа + 1абе1: :БеҒоге { 
сопёеп: '\2713'; 
баскегоипа: уе11омвгееп; 


Как видно на рис. 6.10, это решение уже функцио- 
нирует как рудиментарный стилизованный флажок. 
Теперь необходимо спрятать оригинальный флажок, 
но сделать это таким образом, чтобы не нарушить 
доступность содержимого веб-страницы. Это озна- 
чает, что мы не можем использовать 4іѕр1ау: попе, 
поскольку в этом случае флажок полностью пропа- 
дет из порядка табуляции. Вместо этого применим 
следующий подход: 


іпри+[+уре="сһескбох"] { 
роѕіёіоп: арѕо1и+е; 
с1ір: гесї(0,0,0,0); 


235 


А\мезоте! 


Рис. 6.9. Наш рудиментарный 
уникальный флажок рядом 
с оригинальным флажком 


Стиль, который мы создаем 
для наших флажков в этих 
примерах, чрезвычайно 
прост, однако реальные воз- 
можности бесконечны. Вы мо- 
жете даже вообще отказаться 
от стилизации средствами 
С55 и использовать изобра- 
жения для всех возможных 
состояний флажков! 


М Амезоте! 


Рис. 6.10. Стилизация 
нашего псевдоэлемента под 
уникальный отмеченный 
флажок 


Будьте осторожны 

с подобными разре- 

шающими селектора- 
ми. Использование 
іпри+ [Фуре=" спескКБох" ] 
приводит к тому, что 
флажки, к которым не 
привязаны метки (напри- 
мер, вложенные в тег метки), 
также пропадают, что, 
по сути, делает их абсолютно 
непригодными к исполь- 
зованию. 
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_Амезоте! 
Ө Амезоте! 


& Ауммезоте! 


Рис. 6.11. Сверху вниз: 
уникальный флажок, когда 
он находится в фокусе; 
уникальный флажок, когда 
он недоступен; отмеченный 
уникальный флажок 


Хотя возможности поистине 
бесконечны, все же избе- 
гайте стилизации флажков 
в форме круга: большинство 
пользователей ассоциируют 
круглые элементы управ- 
ления с переключателями 
(гааіо бийоп). То же самое 
можно сказать и о квадрат- 
ных переключателях. 





Благодарности 


Глава 6 • Взаимодействие с пользователем 


Вот и всё! Мы сделали простейший уникальный фла- 
жок. Разумеется, мы могли бы продолжить совершен- 
ствовать его внешний вид: например, настроив разные 
стили для состояний, когда он находится в фокусе 
и когда он недоступен, как показано на рис. 6.11: 


1при* [ +уре="спескБох" ] :Фосиз$ + 1аБе1: : Бефоге { 
рох-ѕһайом: 9 Ө .1ет .1ет #58а; 


} 


іприё[+уре=" сһескбох"]:ЯіѕаБ1еа + 1аБе1: : Бефоге { 
Баскёгоипта: эгау; 
Бох-5Падом: попе; 
со1ог: #555; 


Эти эффекты можно сделать еще привлекательнее, 
добавив переходы или анимации. Или же можно 
вообще пуститься во все тяжкие и создать какие-ни- 
будь скевоморфные переключатели. Возможностям 
действительно нет предела! 


ПОПРОБУЙТЕ САМИ! 


НЕр://р!ау.сз55есге.ю/спескБохе$ 


Благодарю Райана Седдона (Вуап 5еЧ доп) за воплощение первой 
версии этого эффекта, ныне известного как «трюк с флажком» 
(Һр://һесѕѕпіпја.сот/сѕѕ/сиѕіот-іприёѕ-иѕіпо-сѕ). С тех пор Рай- 
ан успел применить эту идею для создания всевозможных вид- 
жетов, требующих сохранения состояния (Һ&р://1абѕ.ћесѕѕпіпја. 


сот/бооіед), таких как модальные диалоговые окна, раскрыва- 
ющиеся меню, вкладки и карусели. Нужно только отметить, что 
такая интенсивная эксплуатация флажков приводит к проблемам 
с доступностью содержимого веб-страницы. 


Переключаемые кнопки 


Вариацию «трюка с флажком» можно использовать для имитации переклю- 
чаемых кнопок, ведь в чистом НТМІ способа создавать подобные кнопки не 
предусмотрено. Переключаемые кнопки — это кнопки, работающие по принципу 
флажков: они включают или выключают настройку и выглядят нажатыми, когда 
настройка включена, или «отжатыми», когда настройка отключена. 
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Семантически никакой разницы между переключаемыми кнопками и флажками 
нет, так что применение данного трюка нисколько не нарушает семантическую 
чистоту кода. 


Для того чтобы создать переключаемые кнопки с помощью данного трюка, 
необходимо всего лишь применить к меткам стилизацию, превращающую их 
в кнопки, вместо использования псевдоэлемента. Например, следующий код 
создает переключаемые кнопки, показанные на рис. 6.12: 


1при* [+уре="спескБох"] { 
роѕіёіоп: арѕо1и+е; 


А с1ір: гесї(0,0,0,0); А\/есоте! 


іпри[+уре="сһескбох"] + 1аБе1 { 
аіѕр1ау: іп1іпе-БЬ1оск; 
рааа1т=: „Зет .5ет; 
баскегоипа: #ссс; 
раскргоипа-ітаве: 1іпеаг-егааіеп+ (#ааа, 


А\мезоте! 








#66); Рис. 6.12. Переключаемая 
Богаег: 1рх $0114 грба(0,0,0,.2); кнопка в обоих своих 
Богдег-гад1и$: „Зет; состояниях 


рох-ѕһайом: Ө 1рх мН1{е 1п5еф; 
Техі-а1івп: сепёег; 
Техі-ѕһайом: 0 1рх 1рх мһі+е; 


} 


іприё[+уре="сһескбох"]:сһескеа + 1абе1, 
іпри[+уре="сһескбох" ]:асёіме + 1абе1 { 
Бох-5Надош: .05ет .1ет .2ет геба(0,0,0,.6) іпѕе+; 
Богаег-со1ог: грба(0,0,0,.3); 
раскегоипа: #6656; 
} 


Однако не забывайте об осторожности при использовании переключаемых 
кнопок. Очень часто переключаемые кнопки снижают удобство в использо- 
вании, так как их легко перепутать с обычными кнопками, которые по нажатии 
производят какое-либо действие. 


ПОПРОБУЙТЕ САМИ! 
Һр://ріау.сѕѕѕесгеїѕ.іо/ёєоддіе-Би&опѕ 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
ЅеІесіогѕ: Һір://%3.ого/ТК/ѕеіесіогѕ 


Ослабление значимости 
путем затемнения 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Знание цветов ВСВА 


Проблема 


Нередко возникает необходимость затемнить все содержимое позади элемента 
с помощью полупрозрачной темной подложки, для того чтобы подчеркнуть 
данный элемент пользовательского интерфейса и привлечь к нему внимание 
пользователя. Например, этот эффект часто используется для создания «све- 
товых коробов» (рис. 6.13) и «экскурсий» по интерфейсу. В самой распростра- 
ненной технике реализации роль затемняющего занавеса играет новый элемент 
НТМІ, к которому применено немного стилизации С55, как в следующем 
фрагменте кода: 


.омег1ау { /* Для затемнения */ 

роѕіёіоп: Ғіхеа; 

Фор: 9; 

г1ёВ*: 0; 

ро++от: 0; 

Іеғі: ө; 

баскргоипа: геба(0,0,0,.8); 
} 


.1ієһ+бох { /* Элемент, к которому мы хотим привлечь внимание */ 
роѕітіоп: абзо1ие; 
2-1п4ех: 1; 
/* [остальные стили] */ 
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Рис. 6.13. В Тлїќег данный эффект используется для оформления всплывающих 
диалоговых окон 


Подложка затеняет все содержимое позади того элемента, к которому мы хотим 
привлечь внимание. .1івһїбох получает более высокое значение 2-1паех, ДЛЯ 
того чтобы этот элемент выводился поверх подложки. Это, конечно, прекрасно, 
но все же данное решение требует дополнительного элемента НТМТ, то есть 
реализовать его с помощью чистого С5$ невозможно. Не самая большая про- 
блема, но по возможности нам все же хотелось бы избежать этого неудобства. 
К счастью, в большинстве случаев это возможно. 


Решение с псевдоэлементом 


Мы можем использовать псевдоэлементы для устранения необходимости в до- 
полнительном элементе НТМГ, например, так: 


Боду . а1ттеа: : Бефоге { 
роѕіёіоп: Ғіхеа; 
Фор: 9; 
гірһё: 0; 
роот: 0; 
Іеғі: е; 
2-іпаех: 1; 
раскргоипа: геба(0,0,0,.8); 
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Это решение чуть лучше, так как теперь мы можем применять нужный эффект 
напрямую из С$$-кода. Однако его проблема в плохой переносимости, так как 
к элементу <Боду> уже может применяться какая-то другая стилизация посред- 
ством его псевдоэлемента : :беҒоге. Также это означает, что для применения 
этого эффекта нам обычно требуется код ЈауаЅсгірё, реализующий класс діттеа. 


Решить эту проблему можно было бы путем добавления подложки через 
собственный псевдоэлемент : :Бефоге элемента, установив для него значение 
2-1п4ех: -1;, для того чтобы подложка отображалась под элементом. Однако, 
хотя это устраняет проблему переносимости, мы все же не можем полностью 
контролировать положение псевдоэлемента по оси 7.. Он может оказаться под 
нашим элементом (как и требуется), но не исключено, что поверх него окажется 
не только наш элемент, но и несколько его предков. 


Еще одна сложность с этим решением заключается в том, что у псевдоэлементов 
не может быть собственных обработчиков событий Јауа$Ѕсгірі. При исполь- 
зовании отдельного элемента для подложки мы можем связывать с ним обра- 
ботчики событий, для того чтобы, например, световой короб закрывался, когда 
пользователь щелкает на подложке. Если же мы используем псевдоэлементы 
на том же элементе, который хотим визуально выделить, становится намного 
труднее определять, щелкает пользователь на элементе или на его подложке. 


Решение с Бох-Паом/ 


Решение с псевдоэлементом более гибкое и чаще всего его хватает для реали- 
зации подложки в привычном понимании этого слова. Однако для более про- 
стых сценариев использования или при разработке макетов мы также можем 
пользоваться преимуществом того факта, что радиус размазывания элемента 
рох-ѕһадом увеличивает его на значение, указанное для каждой стороны. Это 
означает, что мы можем создать очень большую тень без смещения и размытия, 
наспех сварганив некое подобие подложки: 


Бох-ѕһайом: 9 0 Ө 999рх гера(0,0,0, .8); 


Очевидная проблема этого дешевого и сердитого решения — оно не работает 
при очень большом разрешении (> 2000рх). Для устранения этого недостатка 
можно просто указать очень большое значение. Но можно также полностью 
избавиться от конкретных значений, прибегнув к помощи единиц измерения 
окна просмотра, которые способны гарантировать, что «подложка» всегда 
будет больше нашего окна просмотра. Так как мы не можем использовать раз- 
ные значения радиуса размазывания по горизонтали и по вертикали, единица 
измерения окна просмотра, которую логично использовать в нашем случае, — 
это утах. На случай, если вы не знакомы с единицей утах, сообщаю, что 1утах 
эквивалентно либо 1ум, либо 1уһ, смотря какое из этих двух значений больше. 
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190\м эквивалентно ширине окна просмотра, и, аналогично, 100уһ эквивалентно 
его высоте. Следовательно, минимальное значение, удовлетворяющее нашим 
требованиям, — 5ёупах, и его необходимо добавить с каждой стороны, чтобы 
итоговые габаритные размеры подложки на 10ёутах превосходили габаритные 
размеры нашего элемента: 


Бох-ѕһайом: 9 0 Ө 50\тах геба(0,0,0, .8); 


Это простая и быстрая в применении техника, но с ней связаны две довольно серь- 
езные проблемы, ограничивающие ее применение. Можете догадаться какие? 


Во-первых, так как размеры нашего элемента определяются относительно раз- 
меров окна просмотра, а не страницы, при прокрутке мы будем видеть границы 
подложки, если только для элемента не установлено СВОЙСТВО роѕіїіоп: Ғіхеа; 
или если страница не слишком короткая, чтобы ее можно было прокрутить. Но 
так как страницы могут быть очень длинными, не следует пытаться преодолеть 
это ограничение, попросту еще сильнее увеличивая радиус размазывания. 
Вместо этого лучше ограничить использование данной техники элементами 
с фиксированным позиционированием или страницами с минимальным объ- 
емом прокрутки или вообще ее не требующих. 


Во-вторых, использование в качестве подложки отдельного элемента (или 
псевдоэлемента) не только визуально направляет фокус внимания пользователя 
к требуемому элементу. Это также предотвращает взаимодействие с осталь- 
ными элементами страницы посредством мыши, так как события указателя 
мыши захватываются подложкой. Свойство бох -ѕһайом такой возможности 
не предлагает. Следовательно, оно только визуально притягивает внимание 
пользователя к определенному элементу, но само по себе не захватывает 
никакое взаимодействие с мышью. Подходит это вам или нет — зависит от 
вашего конкретного сценария использования. 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесгеїѕ.іо/атттіпд-Бох-ѕһааом 


Решение с задним фоном 


Если элемент, к которому вы желаете привлечь внимание 
пользователя, — модальное диалоговое окно (элемент <аіа1ор»>, 
отображаемый посредством его метода ѕһомМоаа1()), то у него 
уже есть подложка, определенная в таблице стилей Оѕег Авеп. 
К этой родной подложке также можно добавить стили через Ограниченная 
псевдоэлемент : :Баскагор, например, чтобы сделать ее темнее: поддержка 
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аіа1ор::баскагор { 
раскргоипа: геба(е, ө, ө, .8); 


} 


Единственный недостаток этого метода заключается в том, что на момент напи- 
сания данной главы он практически не поддерживается браузерами, поэтому, 
прежде чем применять его, проверьте актуальный уровень поддержки. Помните, 
однако, что даже если задний фон не поддерживается, то ничего не сломается, 
так как это всего лишь усовершенствование восприятия пользователем — про- 
сто у диалогового окна не будет подложки. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/паїме-тоааі 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 

($$ Уаше$ & УпИ$: Һр: //%3.огд/ТВ/с55-уаіиеѕ/ #міеүурог-гејамеіепдёһѕ 
С55 ВасКдгоипта$ & Вогаегѕ: һір://\3.ого/ТВ/с55-раскдгоипаѕ 
ЕиІѕсгееп АРІ: һ@р://#иІѕсгееп.ѕрес.мһаёуд.ого/#::баскагор-рѕеиао-еіетепі 


3 Ослабление значимости 
путем размытия 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Переходы, секрет «Эффект матированного стекла», секрет «Ослаб- 
ление значимости путем затемнения» 


Проблема 


В секрете «Ослабление значимости путем затемнения» мы познакомились со 
способом отвлечения внимания от фрагментов веб-приложения посредством их 
затемнения с помощью полупрозрачной черной подложки. Но если страница 
содержит большое количество деталей, то затемнять ее приходится очень сильно, 
для того чтобы обеспечить достаточный контраст с отображающимся поверх 
текстом или привлечь внимание к световому коробу или другому элементу. 
Более элегантный способ, показанный на рис. 6.14, заключается в том, что мы 
размываем все остальное, за исключением подсвеченного элемента, в дополне- 
ние к затемнению или вместо него. Кроме того, это создает более реалистичный 
эффект глубины, имитируя то, как наше зрение воспринимает объекты, на- 
ходящиеся физически ближе к нам, когда мы на них фокусируемся. 


Однако реализовать этот эффект куда сложнее. До появления специфика- 
ции ЕЩег ЕЁес$ (Һір://%3.ого/ТА/іќег-еесіѕ) это было вообще невозможно, 
и даже с использованием фильтра Ь1иг() задача остается непростой. К чему 
привязывать размывающий фильтр? Или мы должны применить его ко всему, 
за исключением определенного элемента? Если мы применим его к элементу 
<Боду>, то будет размыто все содержимое страницы, включая элемент, к кото- 
рому мы хотим привлечь внимание. Ситуация очень похожа на ту, которую мы 
рассматривали в секрете «Эффект матированного стекла», однако прибегнуть 
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к тому же решению здесь мы не можем, так как позади нашего диалогового 
окна может находиться все что угодно, а не только фоновое изображение. 
Что же делать? 


е Роіудоп 


10б м 516 ИР 


оа 
Е 
Д К 





Рис. 6.14. На игровом веб-сайте роудоп.сот можно найти превосходный пример 
привлечения внимания пользователя к диалоговому окну путем размытия всего 
остального содержимого позади 


Решение 
К сожалению, для данного эффекта нам потребуется дополни- 
БЫР “9 тельный элемент НТМІ: мы должны будем обернуть все со- 
ее держимое нашей страницы, за исключением элементов, которые 
е не должны размываться, в элемент-обертку, а затем применить 
Ограниценная размытие к нему. Для этого идеально подойдет элемент <та1п>, 
поддержка так как он имеет двойное предназначение: отмечает собой ос- 


новное содержимое страницы (диалоговые окна к основному 
содержимому обычно не относятся) и дает нам крючок, на который мы сможем 
навесить нужные стили. Разметка будет выглядеть приблизительно так: 


НТМЕ 
<та1п>Васоп Ірѕит 9010г 51 ате*...</та1п> 
<діа1ов> 

О НАТ, І'т а 941а10о5. С1іск оп те Фо 9151155. 
</41а1о5> 


<!-- любые другие диалоговые окна --> 


33. Ослабление значимости путем размытия 


На рис. 6.15 вы видите, как это выглядит без подлож- 
ки. Таким образом, нам необходимо применять класс 
к элементу <таіп> каждый раз, когда диалоговое окно 
отображается на экране, одновременно применяя 
размывающую фильтрацию, вот так: 


таіп.аде-етрһаѕіғеа { 
Ғі1+ег: Б1иг(5рх); 
} 


Как подтверждает рис. 6.16, это уже огромный шаг 
вперед. Однако сейчас размытие применяется не- 
медленно, что выглядит не слишком естественно 
и ухудшает впечатление пользователя от взаимо- 
действия со страницей. Поскольку фильтры С$$ 
поддерживают анимацию, мы можем заставить раз- 
мытие страницы проявляться плавно и постепенно: 


таіп { 
{гап$141оп: .65 +11{ег; 


} 


таіп.де-етрһаѕіғеа { 
Ғі1+ег: Б1иг(5рх); 
} 


Часто бывает полезно комбинировать два эффекта 
снижения значимости (затемнение и размытие). 
Один из способов сделать это — использовать фильт- 
ры беівһёпеѕѕ() и/или сопёгаѕ+(): 


таіп.де-етрһаѕіғеа { 
Ғі1+ег: БЬ1иг(Зрх) сопёгаѕї(.8) 
бгірћпеѕ5(.8); 


Результат вы видите на рис. 6.17. Затемнение по- 
средством фильтров С55 означает, что если они не 
поддерживаются, то никакое резервное решение 
не применяется. Возможно, затемнение лучше во- 
площать с помощью какого-нибудь другого метода, 
который также может служить резервным решением 
(например, используя свойство бох-ѕһайом, как мы 
делали в предыдущем секрете). Это также избавит 
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Мы предполагаем, что все 
наши элементы <діа1ор> из- 
начально скрыты и в любой 
момент времени на экране 
отображается максимум один 
ИЗ НИХ. 


Васоп ірѕит доЇог $И атеќ сопѕссісиг зћогх ют иќ 
и1-5р ас зат 


рогк. Ем Ше сх 


О НА! Гт а фајор. 


ошт р | 
СЁСК оп те 10 Фет. 


попе. 


Рок сһој 


сШит тадпа вой пб (строг. Рон ют ао хіпі 


! аісаіга 


тала са рот ЬсПу биіѕ. ЅҺошаег Шатсо сһіскеп 
рогснеца, һат апіт уепіат уепіхоп. Рибза 


зет4е ет алетзбсема теста тъга гы срма һеле 


Рис. 6.15. Обычное диалого- 
вое окно без подложки, при- 
званной снижать значимость 
остального содержимого 
страницы 


ОНАІ, Гта фіајор 


Сіск оп те (0 Чёт 


чи 


Рис. 6.16. Размытие элемен- 
та <тат>, когда диалоговое 
окно отображается на экране 
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ыы мы 


О НА! Гм а Фаюв. 


(СЁсК оп те 00 тив. 





СИЕ ЕЕ Ое 5 
АЕС ЕЗ 
У—Ш— ыыы. 


Рис. 6.17. Одновременное 
размытие и затемнение 
посредством фильтров С55 


„..- мыла 


чу ам 19 
ащ ОНАІ, Гм а Фаюв. гч 
дн и 27 


Сіск оп те 10 біѕтіхз, 
^а "аз ага 
уч ОИН, = 
ты са = ло 05 Аль Чень у «даль Ма ве 


АЕС Гар 
=— а таат а а А. А 


Рис. 6.18. Размытие 

с помощью фильтра С55 

и затемнение посредством 
Бох-ѕһћайом, что также служит 
резервным решением 


нас от «эффекта сияния», который можно наблюдать 
по краям на рис. 6.17. Обратите внимание, что на 
рис. 6.18, где мы использовали для затемнения тень, 
этой проблемы не возникает. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/аеетрһаѕігіпо-Ыиг 


Благодарю Хакима Эль Хаттаба (Накіт ЕІ 
Наќар, ћіёр://һакіт.ѕе) за публикацию опи- 
сания схожего эффекта (ћ&р://аб.һакіт. 
ѕе/аудгипа). Кроме того, в версии эффекта, 
Благодарности предложенной Хакимом, содержимое также 
уменьшается благодаря применению транс- 
формации ѕса1е(), что дополнительно 
поддерживает иллюзию диалогового окна, 
находящегося физически ближе к нам, чем 
остальное содержимое страницы. 





СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
Рег ЕНесё$: ИИр://\м/3.огд/ТК/ЯКег-еЙес(5 


($$ Тгап$Иоп$: Һр: //%3.ога/ТЕ/сѕ5-гапѕііопѕ 


4 Подсказки о прокрутке 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Градиенты С55, свойство баскргоипа- ѕіғе 


Проблема 


Полоса прокрутки — главный способ указать, что 
элемент включает больше содержимого, чем видно 
на экране. Однако очень часто они бывают неуклю- 
жими и отвлекают внимание пользователя, поэтому 
разработчики современных операционных систем 
стремятся их упрощать, зачастую даже полностью 
скрывают полосы прокрутки с экрана до тех пор, 
пока пользователь не начинает активно взаимодей- 
ствовать с элементом, поддерживающим прокрутку. 


Хотя сегодня полосы прокрутки используются все 
реже (пользователи обычно прокручивают содержи- 
мое с помощью жестов), указание на то, что внутри 
элемента больше содержимого, чем видно в данный 
момент на экране, — чрезвычайно полезная инфор- 
мация, и ее рекомендуется ненавязчиво добавлять 
даже к тем элементам, с которыми пользователь 
в настоящее время не взаимодействует. 


Дизайнеры-проектировщики пользовательского 
взаимодействия, разрабатывавшие Соозе Веа4ег, 
клиент для чтения К$8-лент от Соое (сейчас 
этот проект уже закрыт), нашли очень элегант- 
ный способ указания на наличие дополнительного 


Ада СаЧасе 
А!ап Риггіпо 
Ѕсһгӧаіпасаї 
Тит Риггпегѕ-Гее 
ҮуерБкіїу 


Рис. 6.19. У этого поля 
больше содержимого, 

чем видно сейчас, и его 
можно прокрутить, но 
пока вы не начнете с ним 
взаимодействовать, вы об 
этом не узнаете 
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содержимого: если элемент содержит больше данных, чем видно на экране, 
сверху и/или снизу врезки отображается легкая тень (рис. 6.20). 


Ноте 
> АП бет (418) 
› Ехріоге 


~ ЅЗибзѕсгіріопѕ 
* № Риппу (280) 
02 А Ргодгаттегз (Ме 
54 АБзиизе Сооѕе 
7; са! уегзиз һитап 
О батл Уоц Ашо С... (228) 
2 иск уеаВ сотри\... (1) 
Самею 
С сеек Апа Роке (1) 


ЗОВЭСКІВЕ 
= А изгарат 
С аиижзвоя (2) 
© тһе Оаііу М га (5) 
М/ЗС В!09 
С$$ М6 Віод 
ӨО Сһгіѕіап НеЙтам... (1) 
С1нтмі5 оосо 
КЎ Ѕтаѕћіпо Мадагі... (10) 
Ж С55-Тпіскѕ 
О оеѕкіор Теат 
Ж һаскѕ.тог11а.ого (7) 
@] вгокеп пке 
5) Тһе С$$ Мпа 
Ё 24 мауз 


ЗИВЗСВВЕ 
мл оу рота чине 0 
5) Оауі@ Вагоп'з Мер, 
5) ЕЁ Сгеу 
©! агаба!Кап.сот 
РипсйопЗоигсе Ро. 
5) Магсоюю. пе! () 
Ш мама Вупепз 
5) тіг.асиіо.иѕ 
Оду 4$ 
0 Впісѕѕ 
$ ОМЅТОРРАВІЕ В 
88 С55 МИгагогу 
№8 Уееце'з Ыод 3.0 


Физ 


Рис. 6.20. Элегантный шаблон пользовательского взаимодействия в Соодіе Веадег, указывающий 
на необходимость прокрутки для просмотра полного содержимого врезки. Слева: содержимое 
прокручено до самого верха. В центре: содержимое прокручено до середины В55-ленты. 
Справа: содержимое прокручено до самого низа 


Однако для того чтобы добиться этого эффекта в Соозе Кеайег, разработчикам 
пришлось добавить немало сценариев. Было ли это действительно необходимо 
или тот же эффект можно реализовать на чистом С55? 


Решение 


Начнем с самой простой разметки, обычного неупорядоченного списка с бес- 
смысленным содержимым (эксцентричными кличками для кошек!): 


НТМЕ 
<и1> 


<11>Ада Са{1асе</11> 
<11>А1ап Ригг1п8</11> 
<11>5сИгба1прса*< /11> 
<11>Т1и Риггпег$-1ее</11> 
<11>мебк1у</11> 
<11>350п</11> 
<11>\о1а< /11> 
<11>№ Кох /11> 
<11>Ма№/11> 
<11>Са+5</11> 
<11>\Месфог</11> 

</и1> 
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Теперь мы можем применить к элементу ‹и1> простейшую стилизацию, для 
того чтобы сделать его меньше длины его содержимого и добавить возмож- 
ность прокрутки: 


оуег{1ом: аифо; 

міаёһ: 19епт; 

һеівһё: Зет; 

райдіпе: „Зет . бет; 
Богаег: 1рх $0114 ѕі1мег; 


Здесь и начинается самое интересное. Давайте создадим наверху тень с помо- 
щью радиального градиента: 


Баскргоипа: гадіа1-ргайіепі (аё ор, грба(0,0,0,.2), 


+гапѕрагепе 70%) по-гереа+; 
раскегоипӣ-ѕіғе: 100% 15рх; 


Результат вы видите на рис. 6.21. Пока что эта тень 


остается на одном месте, даже если мы прокручиваем Ада Сайасе 

содержимое. Это соответствует тому, как фоновые А!ап Рипа 

изображения работают по умолчанию: их позиция 

всегда зафиксирована относительно элемента, не- спгбатоса\ 


зависимо от того, насколько сильно мы прокручи- 
ваем содержимое элемента. Это правило распро- 
страняется также и на изображения со свойством \М\Мебкщу 
баскегоипа-аёёасһтеп : Ғіхеа; единственное отличие 
в том, что они также остаются на своем месте, когда 
пользователь прокручивает содержимое страницы. 
Можно ли заставить фоновое изображение прокру- 
чиваться вместе с содержимым элемента? 


Тит Риггпегѕ-Гее 


Рис. 6.21. Тень наверху 
элемента 


До недавнего времени реализовать этот простой эффект было невозможно. 
Однако наличие проблемы было очевидно, и для ее решения в ВасКэгоип4$ & 
Вогаегѕ Г.еуе 3 (ПЕр://м3.огд/ТВ/сз$3-Баскагоипа/#1осаЮ)) для Баскегоипа-аёасһтепё 
было добавлено новое ключевое слово: 1оса1. 


Но басквгоипӣ-а&+асһтепё: 1оса1 не решает нашу проблему без дополнительной 
обработки напильником. Если мы применим это свойство к нашей градиентной 
тени, то результат будет прямо противоположным: тень будет отображаться, 
когда содержимое прокручено до самого верха, а при прокрутке содержимого 
вниз тень будет пропадать. Но для начала уже неплохо — нужно же с чего-то 
начинать. 


Секрет трюка в том, чтобы использовать два фона: один для тени, а второй — 
представляющий собой, по сути, белый прямоугольник, закрывающий тень 
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и играющий роль маски. Для фона, генерирующего тень, будет установлено 
значение Баскёгоипа-аасптеп* по умолчанию (ѕсго11), так как мы хотим, 
чтобы он всегда оставался на своем месте. Однако для маскирующего фона 
мы установим значение свойства расквгоипа-аасптеп*, равное 1оса1, для того 
чтобы он закрывал тень, когда содержимое прокручивается до самого верха. 
Когда же мы будем прокручивать содержимое вниз, он будет прокручиваться 
вместе с содержимым, открывая таким образом тень. 


Для создания маскирующего прямоугольника мы воспользуемся линейным 
градиентом того же цвета, что и фоновый цвет элемента (в нашем случае это 
белый): 


Баскёгоипа: 11пеаг-вгад1еп{ (мһіе, мһіёе), 
гааіа1-ргадіепі (аё фор, геба(0,0,0,.2), 
{гапзрагеп* 70%); 
Баскёгоипа-гереа*: по-гереа+; 
раскегоипӣ-ѕіғе: 100% 15рх; 
раскегоипа-аёёасһтепё: 1оса1, ѕсго11; 


Нарис. 6.22 вы видите, как это решение работает на разных этапах прокрутки. 
Очевидно, что нам удалось добиться желаемого эффекта, но не без одного 
большого недостатка: когда мы только начинаем прокручивать список, тень 
открывается странным образом и поначалу выглядит обрезанной. Можно ли 
сделать эффект более гладким и естественным? 


Ааа Сайасе Ааа Сайасе Аап Рипа 
Аап Риггіпо Аап Риггіпо Ѕсһгӧаіпосаї 
Ѕсһгӧаіпдсаї 5сһгбаіпдсаї Тит Рштпегѕ-ее 


Тіт Ритпегѕ-ее | ИП Рштпегѕ-іее ууеркіну 
\М>БКИВ/ М/евкшу Зета 


Рис. 6.22. Наши два фона на разных этапах прокрутки. Слева: список прокручен до самого 
верха. Посередине: совсем небольшая прокрутка вниз. Справа: список прокручен вниз 
в значительной степени 


Мы можем воспользоваться преимуществом того факта, что наша «маска» по 
природе своей — это (вырожденный) линейный градиент, и преобразовать его 
в настоящий градиент от цвета ип1{е до прозрачного белого (һѕ1а(0,0%,100%,0) 
или гвба(255,255,255,0)), для того чтобы обеспечить плавное отображение 
нашей тени: 
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Баскёгоипа: 1іпеаг-ргадіепі (мһіёе, һѕ1а(0,0%,100%,0)), 


гааіа1-ргадіепі (аё фор, геба(0,0,0,.2), 


+гапѕрагепё 70%); 


Ада СаНасе Ада Сайасе Аап Рипа 
Аап Рипа А\ап Риггіпо Ѕсһгӧаіпосаї 
Ѕсһгӧаіпдсаї 5сһгбаіпосаї Тіт Ритпегѕ-Гее 


Тит Риггпегѕ-Гее 


ҮуеБкійу 


Тит Риггпегѕ-Гее 


\МеҺКіи 


Ісемт 


Мебкійу 


Рис. 6.23. Использование градиента от мћіќе до {гапзрагеп в качестве первой попытки 


обеспечить плавный вывод тени 


Это шаг в правильном направлении. Как вы видите 
на рис. 6.23, это обеспечивает плавное постепенное 
отображение тени, как мы и хотели. Однако пока 
что у нашего решения есть довольно серьезный не- 
достаток: когда список прокручен до самого верха, 
тень теперь закрывается не полностью. Этот огрех 
можно исправить, сместив границу перехода цвета 
мһіте чуть ниже (если точнее, то на 15рх — такова вы- 
сота нашей тени), чтобы получить поле сплошного 
белого цвета, прежде чем начнется переход к про- 
зрачности. Помимо этого, нам необходимо увели- 
чить размер «маски», для того чтобы он был больше 
тени, иначе градиента не получится. Точное значение 
высоты зависит от того, насколько плавный эффект 
вы желаете реализовать (то есть насколько быстро 
тень должна появляться после начала прокрутки). 
После серии экспериментов я пришла к выводу, что 
5@рх — разумное значение. Финальная версия кода 
выглядит, как показано далее, а результат вы можете 
видеть на рис. 6.24: 


Почему прозрачный белый, 

а не просто ©гапѕрагепё? 
Второе значение — это на 
самом деле всего лишь псев- 
доним для гвба(0,0,0,9), 
поэтому градиент может 
включать оттенки серого 

в переходах от непрозрачного 
белого к прозрачному черно- 
му. Если браузеры интерполи- 
руют цвета в рамках данной 
спецификации в так называе- 
мом цветовом пространстве 
ргетийр!еа В СВА, то такое 
не должно случаться. Разные 
алгоритмы интерполяции не 
входят в список тем, рассма- 
триваемых в этой книге, но 
если вам интересно, в Сети 
вы найдете огромное коли- 
чество разнообразных мате- 
риалов. 


БасКёгоипа: 1Ііпеаг-вгадіепі(мһі+е 30%, +гапзрагеп*), 
гааіа1-ргадіепї (аё 50% 0, грбра(0,0,0,.2), 


{гапзрагеп* 70%); 
Баскёгоипа-гереа*: по-гереа+; 
раскегоипа-ѕіғе: 100% 50рх, 100% 15рх; 
баскегоипа-аёёасһтепё: 1оса1, ѕсго11; 
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Ада СаЧасе баны А!ап Риггіпо 
А!ап Ригпд ы: Ѕсһгӧаіпдсаї 
Ѕсһгӧаіпдсаї ен Тит Риггпегѕ-Гее 
Тит Риггпегѕ-Гее аи \Мебк®у 

АБК НН Меркійу Бен 


Рис. 6.24. Конечный результат 


Разумеется, для того чтобы достичь исходного эффекта, нам потребуются еще 
два градиента для нижней тени, а также маска для нее, но логика остается 
той же самой, так что я оставлю это в качестве упражнения для читателя (или 
загляните в пример из врезки «Попробуйте сами!» ниже). 


ПОПРОБУЙТЕ САМИ! 
Һр://ріау.сѕѕѕесгеїѕ.іо/ѕсго!іпо-һіпёѕ 


Благодарю Романа Комарова за первый пример реализации 
этого эффекта (һір://кіги.ги/еп/ғип/ѕһааоуѕсгоіі). Его версия 
основывается на псевдоэлементах и позиционировании, а не фо- 
новых изображениях, и это может быть интересной альтернативой 


Благодарности для определенных сценариев использования. 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 ВасКдагоипа$ & Вогаегѕ: һір://\3.ого/ТВ/с55-раскдгоипаѕ 
С55 Ітаде Маіиеѕ: Һр: //у3.огд/ТВ/с55-ітадеѕ 


Интерактивное сравнение 
изображений 


Проблема 


Иногда перед вами встает задача показать визуальные различия между двумя 
изображениями, обычно в качестве иллюстрации «было — стало». Например, 
для того чтобы продемонстрировать в портфолио результаты обработки фото- 
графии, показать эффект определенных процедур на веб-сайте салона красоты 
или проиллюстрировать видимые последствия катастрофического события 
в какой-то географической области. 


Самое распространенное решение — просто поместить два изображения рядом 
друг с другом. Однако при этом человеческий глаз замечает только очевидные 
различия и упускает мелочи. Это не страшно, если детали не так важны или 
же различия действительно очень значительные, но во всех остальных случаях 
нам требуется более удобный способ сравнения. 


С точки зрения удобства использования у данной В некоторых вариациях поль- 

проблемы есть несколько решений. Одно из наи- зователь всего лишь двигает 

более распространенных — показывать оба изо- Указатель мыши, вместо того 

бражения в одном и том же месте, быстро сменяя ЕВА иелове. 
Преимущество такого подхода 

одно другим, используя для этого анимированное в том, что его проще заме- 

изображение в формате СІЕ или анимацию С55. тить и использовать, но соз- 

Это намного лучше, чем выводить изображения даваемое мельтешение может 

подле друг друга, но пользователю приходится по- раздражать. 

тратить время на то, чтобы заметить все различия, 

так как ему нужно просмотреть несколько итераций, 

каждый раз фиксируя взгляд на новой области изо- 

бражения. 


254 Глава 6 • Взаимодействие с пользователем 


1ћевиагіап 
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Мого Іпбогасімоз 


Стедиз: Соофе, АР, 
Сопу ітадез, РА 





ие сгемѕ боиѕе Воуа! Мапзюпз оп Гопдоп Коад іп Сгоудоп 


Рис. 6.25. Пример интерактивного виджета для сравнения изображений, позволяющего пользо- 
вателям оценить катастрофические последствия беспорядков в Лондоне в 2011 году (сайт круп- 
нейшей британской газеты Тһе Сиагаіап). Подразумевается, что пользователь будет перетаскивать 
белую полосу, разделяющую два изображения, но ничто на самом изображении не намекает на 
то, что полоса поддается перетаскиванию, поэтому авторам пришлось добавить текстовую под- 
сказку (Мохе {һе ѕі/аег...). В идеальном случае хороший, легкий в изучении интерфейс не требует 
наличия такого вспомогательного текста 


Источник: ћр://ћедиагаіап.сот/ик/іпёегасіїуе/2011/аид/09/1опаоп-гіоїѕ-реѓоге-аќег-рһоёодгарһѕ 


Намного более удобное для пользователя решение — так называемый слайдер 
сравнения изображений. Этот элемент управления содержит оба изображения, 
одно поверх другого, и позволяет пользователю перетаскивать разделитель, 
открывая одно или второе. Разумеется, такого элемента управления в НТМІ. 
в действительности не существует. Его приходится имитировать средствами 
имеющихся элементов, и в Сети можно найти массу вариантов реализации, 
чаще всего требующих каркасов Јауа$сгірё и большого количества Ј$-кода. 


Существует ли более простой способ добавления на страницу подобного эле- 
мента управления? Да, причем целых два! 
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Решение со свойством геяте в С55 


Если подумать, то слайдер сравнения изображений, 
по сути, состоит из изображения и элемента с из- 
меняющимся горизонтальным размером, который 
постепенно открывает другое изображение. Имен- 
но здесь на помощь обычно призывается каркас 
ЈауаЅсгірё: он обеспечивает возможность изменения 
размера верхнего изображения по горизонтали. 
Однако для того, чтобы сделать размер элемента 
динамичным, вовсе не обязательно прибегать к по- 
мощи сценариев. В С$$ Оѕег Іпѓегѓасе Г.еуе| 3 (Һр:// 
мЗ.ога/ТВ/с5$3-и/ #гезте) мы получили новое свойство, 
предназначенное специально для выполнения этой 
задачи: скромное гез12е! 


Дажеесли вы никогда не слышали о таком свойстве, 
то наверняка видели его в действии, так как по 
умолчанию для него устанавливается значение боїћ 
для элементов <+ехфагеа>, благодаря чему размер 
текстовых полей можно менять в обоих направле- 
ниях. Но в действительности это свойство можно 
устанавливать для любых элементов при условии, 
что значение оуегЕ1ом для данного элемента не 
равно уіѕір1е. По умолчанию значение ге512е поч- 
ти для всех элементов равно попе, что запрещает 
изменение их размера. Помимо бої+һ, это свойство 
также принимает значения һогіғоп+а1 и уег{1са1, 
ограничивающие направление изменения размера. 


Вы наверняка уже задаетесь вопросом, можно ли 
применить это свойство для реализации нашего 
слайдера сравнения изображений. Что ж, не узнаем, 
пока не попробуем! 


Первой мыслью может быть всего лишь добавить 
два элемента <ітв>. Однако применение геѕіғе на- 
прямую к «іте> дает ужасные результаты, поскольку 
при изменении размера изображения оно искажает- 
ся. Гораздо разумнее установить это свойство для 
контейнера ‹а1\>. В итоге мы получим примерно 
такую разметку: 


255 


Хорошая идея во многих си- 
Туациях — устанавливать для 
<фехфагеа> свойство геѕіхе: 
уегїіса1, для того чтобы 
разрешить изменение разме- 
ра, но только по вертикали, 
так как горизонтальное изме- 
нение размера обычно ломает 
макет страницы. 


Когда објес+-+#1і+ и објес+- 
роѕі+іоп будут лучше под- 
держиваться браузерами, это 
перестанет быть проблемой, 
так как мы сможем контро- 
лировать способ изменения 
размера изображений точно 
так же, как уже сейчас кон- 
тролируем масштабирование 
фоновых изображений. 
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НТМЕ 
<аіу с1аз5="1таве-$114ег"> 
<аіу> 
<іте ѕгс="ааатса+1асе-беҒоге.јре" а1{="Вефоге" /> 
</аіу> 
<іте ѕ”с="ааӢатса1асе-аҒёег.јре" аї="АҒёег" /> 
</аіу> 


Затем применим немного простейшего С55 для позиционирования и опреде- 
ления размеров: 


„1таве-$5114ег { 
ро$1 1 оп: ге1аёіме; 
915р1ау: 1п11пе-61оск; 
} 


.імаве-51іаег > а1у { 
роѕітіоп: абзо1ие; 
Фор: 0; Боот: 0; 1Іеғі: 0; 
міаёһ: 50%; /* Первоначальное значение ширины */ 
омегҒ10и: һіддеп; /* Изображение должно обрезаться */ 


} 


„.1таёе-$114ег 1т8 { 41ѕр1ау: Б1оск; } 


Сейчас результат выглядит как на рис. 6.26, но эле- 
мент пока что статичный. Если мы вручную будем 
менять ширину, то сможем пронаблюдать все этапы 
изменения представления двух изображений. Для 
того чтобы ширина менялась динамически через 
взаимодействие с пользователем, но посредством 
свойства гез1те, нам нужно добавить еще два объ- 
явления: 





„1тазе-°114ег > а1у { 


Рис. 6.26. После базовой ро$141оп: абѕо1иїе; 
стилизации это уже начинает фор: 0; Боффот: 0; 1еғё: 0; 
напоминать слайдер для срав- міаєһ: 50%; 


о\ег1ом: һіддеп; 


нения изображений, но пока 1 5 
геѕіғе: һогіғопЁа1; 


мы не можем менять ширину 
верхнего изображения } 


Единственное визуальное отличие состоит в том, 
что теперь в правом нижнем углу изображения «до» 
отображается манипулятор для изменения разме- 
ра (рис. 6.27), но теперь мы можем перетаскивать 
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и менять ширину изображения сколько нашей душе 
угодно! Однако поиграв с нашим виджетом, мы 
обнаруживаем несколько слабых сторон: 


О изменяя ширину элемента ‹а1\>, мы можем вы- 
ходить за пределы изображений; 





О манипулятор для изменения размера не так про- 
сто заметить. 





Первую проблему решить просто. Нам всего лишь 
нужно задать для свойства тах -мійёєћ значение 100%. рус, 6.27. Наш слайдер для 
Второй вопрос несколько сложнее. К сожалению, сравнения изображений дей- 
не существует стандартного способа менять размер с̧твительно выполняет функ- 
манипулятора. Некоторые механизмы визуализации ЧИЮ слайдера, но у текущего 
поддерживают собственные псевдоэлементы (такие, РЕШеНИЯ все же есть несколь- 
как : : -меркії-пеѕіхег), но результаты их примене- и 

ния ограничены как в терминах поддержки браузера- 

ми, так и в терминах гибкости стилизации. И все же 

не теряйте надежды: оказывается, если наложить псевдоэлемент на манипулятор 
для изменения размера, то это нисколько не повредит его функциональности, 
даже без роїіпёег-еуепёѕ: попе. Таким образом, решением, подходящим для 
разных браузеров, будет всего лишь... наложить на наш манипулятор еще один 
манипулятор. Давайте сделаем это: 


.ітаве-51іаег > іу: :реҒоге { 


сопіепі: ; 

роѕітіоп: абѕо1и+е; 
роот: 0; гіеһі: 0; 
міаёһ: 12рх; һеієһ: 12рх; 
Баскёгоипа: мћіте; 

сиг5ог: ем-геѕіғе; 


Обратите внимание на объявление сигѕог: ем-ге$12е — оно дополнительно на- 
мекает на возможность взаимодействия с элементом, подсказывая пользователю, 
что здесь находится манипулятор. Однако мы не должны надеяться на изменение 
внешнего вида курсора как на единственную подсказку, поскольку они заметны, 
только когда пользователь уже взаимодействует с элементом управления. 


Сейчас наш манипулятор для изменения размера выглядит как белый квадра- 
тик (рис. 6.28). Но мы можем сделать шаг вперед и изменить его стилизацию 
в соответствии с собственными вкусами. Например, давайте превратим его 
в белый треугольник, отстоящий от краев изображения на 5рх (как показано 
на рис. 6.29). Для этого нам потребуется такой код: 
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Рис. 6.28. Стилизация 
манипулятора для изменения 
размера под белый квадратик 
путем наложения на него 
псевдоэлемента 





Рис. 6.29. Стилизация 
псевдоэлемента, 
отвечающего за фальшивый 
манипулятор, в форме 
треугольника, сдвинутого 
на 5рх относительно краев 
изображения 


раа41т5: 5рх; 
Баскёгоипа: 
]11пеаг-вгад1еп* (-454ев, мп1{е 50%, 
{гапзрагеп{ 0); 
баскегоипа-с1ір: соп+еп? -бох; 


В качестве дополнительного усовершенствования 
мы могли бы применить изег-5е1ес*: попе к обоим 
изображениям, чтобы ошибка при захвате мани- 
пулятора не приводила к их бессмысленному вы- 
делению. В итоге окончательная версия кода будет 
выглядеть так: 


.імаве-51іаег { 
роѕіїіоп: ге1аііме; 
аіѕр1ау: 1п11пе-61оск; 
} 


„1тазе-°114ег > іу { 
роѕіїіоп: абзо1и*е; 
Фор: 0; Боот: 0; 1Іе?і: 0; 
міаһ: 50%; 
тах-міаёһ: 100%; 
оуег+1ом: һіааеп; 
геѕіғе: һогіғоп+а1; 


} 


.імтаве-51іаег > 41м: :реҒоге { 
сопёепё: ''; 
роѕіїіоп: абзо1и*е; 
Боот: 0; гірһі: 0; 
міаєһ: 12рх; һеієһ: 12рх; 
радаіпе: 5рх; 
Баскёгоипа: 
11пеаг-вга1еп* (-454е=, мһі+е 50%, 
{гапзрагеп{ 09); 
раскегоипа-с1ір: сопёепі -бох; 
сигѕог: ем-ге$17е; 


} 


.імтаве-51іаег 118 { 
аіѕр1ау: Б1оск; 
иѕег-ѕе1есі: попе; 
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ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/ітаде-ѕїег 


Решение с ползунком 


Метод со свойством гез1те из С55, описанный в предыдущем разделе, от- 
лично работает и требует совсем небольшого объема кода. Однако у него есть 
несколько недостатков: 


о 





о 


им невозможно воспользоваться при работе только с клавиатуры; 


перетаскивание — единственный способ изменить размер верхнего изобра- 
жения, что может превратиться в утомительную задачу, если изображение 
достаточно велико или если у пользователя нарушены моторные функции. 
Если бы у пользователя была также возможность щелкнуть в какой-то 
точке и тем самым изменить размер изображения до этой позиции, то таким 
виджетом пользоваться было бы намного удобнее; 


пользователь может изменить верхнее изображение только путем перета- 
скивания его правого нижнего угла, манипулятор в котором бывает сложно 
заметить, Даже если мы определяем для него дополнительные стили, как 
описано выше. 


Если вы не против некоторого объема сценариев, то мы можем воспользоваться 
элементом управления $114ег (ползунок в НТМІ). Мы наложим его поверх 
наших изображений и настроим так, чтобы он мог управлять изменением раз- 
мера. Это решит все три перечисленные выше проблемы. Так как мы все равно 
планируем использовать ]5, то можем добавить еще несколько элементов по- 
средством сценариев, поэтому начнем с самой пустой разметки, какая только 
возможна: 


НТМЕ 
<аіу с1аѕ5="ітаве-51ійег"> 


<іте ѕ"с="ааӢатса1асе-беҒоге.јре" а1ї="ВеҒоғе" /> 
<іте ѕ”с="ааӢатса+1асе-аҒёег.јре" аї="АҒёег" /> 


</аім»> 


Затем наш код ] $ преобразует его в следующую версию и добавит на ползунке 
событие, для того чтобы он также устанавливал ширину блока аіху: 
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НТМЕ 
<аіу с1аз5="1таве-$114ег"> 
<аіу> 
<іте ѕпс="ааатса+1асе-беҒоге.јре" а1{="Вефоге" /> 
</аіу> 


<іте ѕ”с="ааӢатса+1асе-аҒёег.јре" аї="АҒёег" /> 
<іпри +уре="гапве" /> 
</аіу> 


Сам код ЈауаЅсгірё довольно прост: 
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$$ ('.ітаре-51ідег') .ҒогЕасһ(Ғипсёіоп(ѕ1ійег) { 
// Создаем дополнительный блок ім и 
// оборачиваем его вокруг первого изображения 
уаг діу = Яӣоситеп+. сгеаёеЕ1етеп ( 'аіу'); 
уаг 1т8 = 511ідег. диегуѕе1ес+ог('ітрв'); 
ѕ1іаег.іпѕег+ВеҒоге(іте, дім); 
аіу.аррепасһі1а(іте); 


// Создаем ползунок 

үаг гапве = Яоситеп . сгеаъеЕ1етеп+( '1при*'); 

гапве.ъуре = 'ғапре'; 

гапре.опіпри = #Ғипс+ёіоп() { 
аіу.ѕ%у1е.міаёћһ = &һіѕ.ма1ие + '%'; 


}; 
ѕ1іаег.аррепасһі1а(гапве); 


}); 


С55-код, который мы возьмем в качестве отправной точки, практически ана- 
логичен версии из предыдущего решения. Мы только удалим несколько не- 
нужных фрагментов: 


О нам больше не требуется свойство геѕіге; 


О нам не требуется правило .ітаре-51ійег > а1\: :Бефоге, так как у нас больше 
нет манипулятора для изменения размера; 





О нам не требуется свойство тах -міа+һ, потому что этим значением будет 
управлять ползунок. 


Вот как наш С58-код выглядит после этих модификаций: 
„.1таре-$114аег { 

роѕіёіоп: ге1аііме; 

аіѕр1ау: іп1іпе-БЬ1оск; 
} 


„1таре-$114ег > а1у { 


35. Интерактивное сравнение изображений 


роѕіёіоп: арѕо1и+е; 

Фор: 0; Боот: 0; Ле: 0; 
міаһ: 50%; 

омегғ1ом: һіайеп 


} 

„1таёе-$114ег іме { 
91$р1ау: Б1оск; 
иѕег-ѕе1есі: попе; 


Если мы сейчас протестируем этот код, то увидим, 
что он уже работает, но результат выглядит ужасно: 
ползунок находится в произвольном месте под изо- 
бражениями (рис. 6.30). Нам необходимо применить 
несколько стилей С$$5, для того чтобы поместить 
его на изображения и совместить с ними по ширине: 


„1таре-$11аег 1при* { 
роѕіёіоп: абзо1ие; 
Іеғі: ө; 

Боффот: 10рх; 
міаһ: 106%; 
магё1т: 0; 


Как видно на рис. 6.31, результат выглядит уже впол- 
не прилично. Существует несколько специализиро- 
ванных псевдоэлементов, позволяющих добавлять 
к ползункам желаемые стили, оформляя их по своему 
вкусу. Среди них : : -то2-гапре-+гаск, : : -тѕ-Ёгаск, 
: : -мебк1{-$11аег-ЕВимтьЬ, : : -то2-гапве-һитр И ::-т$- 
+Пимб. Но как это часто бывает со специализирован- 
ными возможностями, результаты их применения 
непоследовательны, хрупки и непредсказуемы, по- 
этому я рекомендую отказаться от их использования, 
если только у вас нет действительно основательных 
причин внедрять их. Я свое слово сказала. 


Если еще одним нашим пожеланием является неко- 
торая визуальная унификация ползунка с основным 
элементом, то нам может помочь режим смешивания 
и/или фильтр. Режимы смешивания ти11р1у, ѕсгееп 
и Іитіпоѕіїу дают довольно хорошие результаты. 
Кроме того, +11{ег: сопёгаѕ+ (4) способен сделать 
ползунок черно-белым, а значение контраста меньше 
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Рис. 6.30. Наш элемент 
управления теперь работает, 
но мы все еще должны 
создать стили для ползунка 


СОВЕТ 

Используйте іпри+ :іп-гапве 
вместо простого 1при*, для 
того чтобы стили применя- 
лись к ползунку только в том 
случае, если ползунки под- 
держиваются. Тогда благо- 
даря каскадным свойствам вы 
сможете скрывать его в ста- 
рых браузерах или оформлять 
иным способом. 





Рис. 6.31. Благодаря 
стилям наш ползунок 
теперь находится поверх 
изображений 
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Рис. 6.32. Использование 


режимов смешивания и филь- 
тров для визуальной унифи- 
кации ползунка и основного 
элемента управления. Также 
мы сделали ползунок больше 
с помощью трансформа- 

ций С55 


единицы способно добавить оттенков серого. Воз- 
можности бесконечны, и единственно верного вы- 
бора здесь быть не может. Вы можете даже сочетать 
режимы смешивания и фильтры, например так: 


Ғі1#ег: сопЁгаѕ1(.5); 
тіх-Б1епа-тоде: 1Іитіпоѕі+у; 


Помимо этого, мы можем увеличить область, кото- 
рую пользователь использует для изменения раз- 
мера, для того чтобы ему было удобнее это делать 
(в соответствии с законом Фиттса). Для этого умень- 
шим значение ширины и компенсируем различие 
с помощью трансформаций С5$: 


міаһ: 50%; 
{гап$Фогт: ѕса1е(2); 
їгапѕҒогт-огівіп: Іе+і бобёот; 


Результат применения обеих стилизаций вы видите на рис. 6.32. Еще одно 
преимущество данного подхода — хотя и временное — заключается в том, что 
ползунки в настоящее время поддерживаются браузерами лучше, чем свойство 


геѕіхе. 


Спасибо Дадли Стори (риіеу Зогеу) за первую версию этого реше- 
ния (ПЕр://дето${епе$.по/Ыо9/819/А-Вегоге-Апа-АЁег-Гтаде- 
Сотрайзоп-5!ае-Сопго|-т-НТМЕ5). 
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36 Определение размера изнутри 


Проблема 


Как мы все знаем, если мы не устанавливаем конкретное значение һеівһ+ для 
элемента, то его высота автоматически корректируется в зависимости от раз- 
мера содержимого. А что, если нам бы хотелось наблюдать схожее поведение 
атрибута міаєһ? Например, предположим, что мы оформляем иллюстрации 
с помощью НТМІ.5, используя примерно такую разметку: 


НТМЕ 


<р>Ѕоте фехе [...]</р> 
<Ғівиғе> 
<іте ѕ"с="ааӢатса+1асе.јре" /> 
<Ғівсарііоп> 
Тһе геа 51” Адат Са+1асе маѕ патеа аҒёег 
Соипёеѕѕ Ада Іоуе1асе, {Пе +1г5{ рговгаттег. 
</Ғівсарёіоп> 
</Е1виге> 
<р>Моге фехе [...].</р> 


Также предположим, что мы применяем какую-то простейшую стилизацию, 
скажем, создаем рамку вокруг иллюстраций. По умолчанию результат выглядит 
как на рис. 7.1. Но мы хотим, чтобы ширина иллюстраций была равна ширине 
содержащихся в них изображений (которые могут быть абсолютно разными), 
атакже чтобы они выравнивались по центру по горизонтали. Текущий вариант 
визуализации далек от желаемого результата: строки текста намного длиннее 
изображения. Как же сделать так, чтобы ширина иллюстрации определялась 
шириной содержащегося в ней изображения, а не шириной родительского 
элемента?! За время своей карьеры вы наверняка успели составить собственный 





' На профессиональном жаргоне С$$ это означает, что ширина должна определяться из- 
нутри, а не снаружи. 


36. Определение размера изнутри 


список С55-стилей, которые приводят к такому 
поведению свойства міа+ћ, чаще всего в качестве 
побочного эффекта: 


Ч если мы сделаем элемент <+1виге> плавающим, то 
это даст нам нужную ширину, но кардинальным 
образом изменит макет иллюстрации, что нам, 
скорее всего, совершенно не нужно (рис. 7.2); 


О установка свойства аіѕр1ау: іп1іпе-Ь1оск для 
иллюстрации позволяет определять ее размер 
в зависимости от ее содержимого, но не так, как 
нам бы этого хотелось (рис. 7.3). Помимо этого, 
даже если бы способ вычисления ширины со- 
ответствовал нашим ожиданиям, было бы чрез- 
вычайно сложно в таких условиях выравнивать 
иллюстрацию по центру. Нам понадобилось бы 
применить +ехїа11ірп: сепїег к ее родительскому 
элементу и ќехё-а1івп: 1е#+ к любым другим воз- 
можным потомкам этого родительского элемента 
(рут от, 41, ...); 


О вкачестве последнего средства разработчики часто 
прибегают к установке фиксированного значения 
міаєһ или тах-міа+һ для иллюстраций и приме- 
нению тах-міаєһ: 100% К Ғівиге > іп. Однако это 
приводит к неэффективному расходованию до- 
ступного пространства, может давать уродливые 
результаты для слишком маленьких иллюстраций, 
а также не адаптивно. 


Существует ли достойное решение этой проблемы 
на чистом С $5 или же нам следует сдаться и при- 
ступить к кодированию сценария, динамически 
устанавливающего ширину иллюстраций? 


Решение 


Относительно новая спецификация, С$8 Іпёгіпѕіс 
& Ехігіпѕіс $5і2іпе Моше Г.еуе! 3 (Нр://\мЗ.огд/ТВ/ 
с553-5ігіпд), определяет несколько новых ключевых 
слов міа+ћ и һеіғһ, одним из самых полезных среди 
которых является піп-сопёепё. Это ключевое слово 
дает нам ширину самого большого неразделяемого 
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Пани ввысь Вы же не вавоу а ео быв ь Быжеоажсы. 





ТА рта бе Ан Сы май А Аа о, Ње Борт се 


ед е као пае Ба В Бола ешо оа чаба ша со рам, 


Рис. 7.1. Визуализация 
нашей разметки по 
умолчанию; немного С55- 
кода добавлено для создания 
рамок и определения ширины 
забивки 





Рис. 7.2. Попытка решить 
проблему ширины с помощью 
плавающего элемента 
порождает новые проблемы 








Заки воем ен Бо ка мы ешь да Быт «шо рем, 


Рис. 7.3. Вопреки нашим 
ожиданиям, аіѕріау: 
іпііпе-Ыіоск не дает нам 
иллюстрацию нужной ширины 
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По ест Вас рна Ве а авот алде ра Бан пбн Каі ене аа. 





Рис. 7.4. Итоговый результат 


Еще одно значение, тах - 
сопёеп+, дает нам то же зна- 
чение ширины, которое мы 
получали с а15р1ау: іп1іпе- 
Ь1оск в примере выше. 

А +1 -сопфеп{ определяет то 
же поведение, что и с плава- 
ющими блоками (очень часто, 
но не всегда совпадающее 

с поведением при использо- 
вании тіп- сопёепё). 


Глава 7 • Структура и макет 


элемента внутри поля (то есть самое широкое слово 
или изображение либо поле фиксированной шири- 
ны). Это в точности то, что нам требуется! Теперь 
задать для наших иллюстраций подходящую ши- 
рину и высоту, выровняв их по горизонтали, можно 
с помощью всего лишь двух строк кода: 


Ғіриге { 
міаёһ: тіп-сопёеп+; 
тагріп: аифо; 


Результат вы можете видеть на рис. 7.4. Для обе- 
спечения изящного обходного пути в старых брау- 
зерах эту технику можно объединить с установкой 
фиксированного значения тах-міаёһ, например так: 
Ғіриге { 

тах-міаєһ: 300рх; 

тах-міаёһ: тіп-сопёеп+; 

тагеіп: аифо; 


} 


Ғіриге > іте { тах-міаёһ: іпһегі+; } 


В современном браузере второе определение тах-міа+һ замещает первое, но если 
размер иллюстрации определяется изнутри, то тах-міаёћ: іпһегі+ не оказывает 


никакого эффекта. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/іпЕгіпѕіс-ѕі2іпо 


Спасибо Дадли Стори (Риеу Ѕїіогеу, Һ№р://Яаетоѕіһепеѕ.іпғо) за 
то, что придумал этот сценарий использования (Һ&р://аетоѕіћепеѕ. 
іпғо/0109/662/реѕідп-Егот-{ће-Іпѕіае-ОиЁ-М/їһ-С55-МіпСопќепі). 


Благодарности 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Іпїгіпѕіс & Ехїгіпѕіс та: Һр://\3.огд/Т6/с553-5і2іпд 


Укрощение ширины 
столбцов таблиц 


Проблема 


Хотя мы уже очень давно прекратили использовать таблицы для создания 
макетов, они все же занимают достойное место на современных веб-сайтах: 
они используются для отображения таких табличных данных, как статистика, 
сообщения электронной почты, перечисления элементов с большим объемом 
метаданных и многого другого. Кроме того, мы можем заставлять другие элемен- 
ты демонстрировать свойства, характерные для таблицы, используя ключевые 
слова свойства 415р1ау, связанные с таблицами. Однако каким бы удобным ин- 
струментом они ни были в определенных обстоятельствах, макет таблиц ведет 
себя очень непредсказуемо, когда дело доходит до динамического содержимого. 
Причина этого в том, что размеры столбцов корректируются в зависимости от 
объема содержимого, и даже явные объявления міа+ћ считаются не более чем 
подсказками, как видно на рис. 7.5. 


По этой причине нам часто приходится либо использовать другие элементы для 
отображения табличных данных, либо мириться с непредсказуемостью макета. 
Существует ли способ заставить таблицы вести себя прилично? 


Решение 


Решение приходит в форме малоизвестного свойства С$5 2.1 под названием 
таБ1е-1ауоц*. Его значение по умолчанию равно аџ+о, что определяет так назы- 
ваемый алгоритм автоматического расчета табличного макета, демонстриру- 
ющий знакомое поведение, показанное на рис. 7.5. Однако у него есть и второе 
значение, Ғіхеа, обеспечивающее более предсказуемое поведение. Оно дает 
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Рис. 7.5. Алгоритм разметки таблицы по умолчанию для таблиц с двумя столбцами 
и содержимым переменного размера (контейнер этих таблиц обозначен пунктирной рамкой) 





Даже если мы задаем 
значение ширины, то 
не всегда получаем 
его на выходе. 

Моя ширина равна 
1000рх... 





... а моя ширина равна 2009рх. Но 
так как здесь недостаточно места 
для здёерх, ячейки пришлось 
пропорционально уменьшить до 
33,3% и 66,6% общей ширины 
соответственно. 








1 
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Если мы запретим перенос 
строк, то таблица может 
стать такой большой, что 
вылезет за пределы своего 


контейнера. 





...И Фех&-оуег+1ом: е111ірѕіѕ не поможет. 











Большие 
изображения 

и блоки кода 
также могут 
привести 

к возникновению 
этой проблемы. 
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равна 1000рх... 


Если мы не... указываем ширину ячеек, то им 
присваиваются значения ширины, 
зависящие от их содержимого. Обратите 
внимание, что здесь ячейка с большим 
объемом содержимого намного шире. 

Если мы не... указываем ширину ячеек, то им 
присваиваются значения ширины, зависящие 
от их содержимого. Обратите внимание, 
что здесь ячейка с большим объемом 
содержимого намного шире. 

Все строки учитываются при Обратите внимание, что здесь размеры 

вычислении значений ширины, а не | ячеек отличаются от предыдущего примера. 

только первая. 

Даже если мы задаем значение ширины, то не всегда получаем его на выходе. Моя ширина 











Если мы запретим 
перенос строк, то 
таблица может стать 
такой большой, что 
вылезет за пределы 
своего контейнера. 


...И Техі-омег+Ғ1ом: е111р$1$ не п. 











Большие изображения 
и блоки кода также 
могут привести 

к возникновению этой 
проблемы. 








-|---============--4-- 5-р ЗЕЕ ОЕОКОЕ ЗЕЕ 





Рис. 7.6. Те же таблицы, что и на рис. 7.5, но с установленным свойством {аЫе-!ауои(: Яхед. 
Обратите внимание на следующие особенности (для каждой из показанных таблиц): 


® когда мы не определяем никаких значений ширины, ширина всех столбцов становится 


одинаковой; 


• вторая строка никак не влияет на ширину столбцов; 


• если задано большое значение ширины, то оно применяется как есть и столбцы не сжимаются; 


• свойства оуе Йом! и {ех{-оуегЙом/ работают как задумано и не игнорируются; 


• содержимое может вытекать за пределы ячеек таблицы (если для свойства омегЯо\м 
установлено значение м5Ые) 
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большую свободу действий разработчику (да, вам!), снимая часть ответственно- 
сти с механизма визуализации. Стили действительно принимаются во внимание 
и не считаются простыми подсказками, переливание через край происходит 
так же, как с любым другим элементом (включая ех -оуег+1ом), а содержимое 
таблицы влияет только на высоту каждой строки и больше ни на что. 


Помимо лучшей предсказуемости и удобства, алгоритм фиксированного 
табличного макета работает значительно быстрее. Поскольку содержимое 
таблицы не влияет на ширину ячеек, никакие элементы во время загрузки 
страницы не перерисовываются. Всем нам знакома ситуация, когда по мере за- 
грузки страницы таблица постоянно перерисовывается из-за изменения ширины 
столбцов. С фиксированными табличными макетами об этом можно забыть. 


Чтобы воспользоваться этой возможностью, необходимо установить данное 
свойство для элементов <+аб1е> и элементов со свойством 41$р1ау: та 1е. Об- 
ратите внимание, что для того, чтобы фокус сработал, необходимо обязательно 
задать значение ширины для этих таблиц (даже если оно равно 100%). Кроме 
того, для того чтобы работало свойство +ехё-оуег+10и: е111рѕіѕ, следует также 
задать ширину соответствующего столбца. Вот и все! Результаты вы видите 
на рис. 7.6. 


фаб1е { 
Фа61е-1ауои*: Ғіхеа; 
міаһ: 100%; 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесге(ѕ.іо/ёєаЫе-соіитп-міаёһѕ 


Спасибо Крису Койеру (Сһгіѕ Соуіег, Һ&р://с55-ігіскѕ.сот), при- 
думавшему эту технику (ћіёр://с55-ігіскѕ.сот/хіпо-ѓаЫБіеѕ-Іопд- 
Ѕігіпд5). 


Благодарности 


Стилизация путем подсчета 
смежных элементов 


Проблема 


Можно назвать много ситуаций, когда возникает необходимость определять для 
элементов разные стили в зависимости от того, сколько у них всего смежных 
элементов. Главный сценарий использования здесь — улучшение восприятия 
пользователем и экономия экранного пространства в раскрывающемся списке 
за счет скрывания элементов управления или уменьшения их в размере по мере 
увеличения списка. Вот несколько примеров: 


О список сообщений электронной почты или схожих текстовых элементов. 
Если их всего лишь несколько штук, то для предварительного просмотра эле- 
ментов мы можем отображать большие текстовые отрывки. По мере того как 
список растет, мы сокращаем количество строк в области предварительного 
просмотра. Когда длина списка становится больше высоты окна просмотра, 
мы можем даже полностью скрыть текстовые отрывки и уменьшить размер 
кнопок, для того чтобы минимизировать необходимость прокрутки; 


О приложение с напоминаниями о предстоящих делах, в котором каждый 
элемент отображается крупным шрифтом, пока элементов не много. Чем 
больше элементов создает пользователь, тем меньше мы делаем размер 
шрифта (для всех элементов); 


О приложение с цветовой палитрой, в котором элементы управления отобра- 
жаются на каждом образце цвета. Эти элементы управления можно делать 
более компактными по мере того, как количество цветов растет, а место, 
занимаемое каждым образом, соответственно уменьшается (рис. 7.7); 


О приложение с несколькими элементами ‹+ехіагеа>, в котором все их при- 
ходится уменьшать с добавлением каждого нового элемента (как на Һ&р:// 
БуезметаКег$.сот). 
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Рис. 7.7. Элементы управления становятся все меньше с увеличением количества цветов 

и сокращением количества свободного пространства. Обратите внимание на особое оформление 
в случае, когда цвет только один: кнопка удаления скрыта. 

Цвета взяты из палитр Адобе Соог (ћ&р://соІіогааобе.сот): 

Адаме (һір://соіогааобе.сот/адахе-соіог-һете-387108) 


Ѕиѕһі Макі (Һр://соіогааоБбе.сот/5иһі-Макі-соіойһете-350205) 


Однако с помощью селекторов С$5 решить задачу по выбору элементов в за- 
висимости от общего количества «братьев» не так-то просто. Предположим, мы 
хотели бы применить определенные стили к элементам списка в случае, когда 
общее количество элементов равно 4. Мы могли бы использовать 11: пёһ- 
сһі14(4) для выбора четвертого элемента в списке, но это не то, что нам нужно; 
нам необходимо выбрать все элементы, но только в том случае, когда их общее 
число равно четырем. 


Следующей идеей могло бы быть использование обобщенного комбинатора 
«братьев» (~) совместно с : пЕһ-сһі1а(), как в 11: пЕһ-сһі14(4), 11: пһсһі14(4) ~ 11. 
Однако при этом в выборку попадают только четвертый потомок и элементы 
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после него (рис. 7.8), независимо от общего количе- у 
ства. Так как не существует комбинатора, который 
мог бы «оглянуться назад» и выбрать предыдущих 2 / 
«братьев», следует ли вовсе отказаться от попыток ЕЯ @ 
добиться нужного результата с помощью С$5? Нет, 
давайте не терять надежды. 





Рис. 7.8. Элементы, которые 
попадают в выборку при 
использовании |і:пёћ-сћ19(4), 


Решение ії:тћсћіа(4) ~ Іі 


Для особого случая, когда элемент ровно один, существует очевидное решение: 
селектор :оп1у-сһі14, созданный специально для этого. Он не только удобен 
в качестве отправной точки; существуют несколько сценариев использования, 
требующих именно этого селектора, и поэтому он был добавлен в специфи- 
кацию. Например, обратите внимание, что на рис. 7.7 мы скрываем кнопку 
удаления, когда на экране остается только один цвет. Это можно реализовать 
с помощью селектора С55 :оп1у-сһі1а: 


Іі:оп1у-сһі1а { 
/* Стили для ситуации, когда элемент только один */ 


} 


Но селектор :оп1у-сһі1а эквивалентен : Ғігѕі-сһі14:1а51-сһі1а. Причина оче- 
видна: если первый элемент также является последним элементом, то отсюда 
логически вытекает, что он единственный элемент. Кроме ТОГО, :1аѕ+-сһі1а — 
это сокращение для : пёћ1аѕ-сһі1а(1): 


11:#151-сһі1а:пЕһ-1аѕ&-сһі14(1) { 
/* То же самое, что и 11і:оп1у-сһі1а */ 


} 


Теперь у нас есть параметр — в данном случае это 1, — и мы можем настраивать 
его по своему усмотрению. Попробуйте угадать, какие элементы выбирает 
селектор 11: #Ғігѕ+-сһі1а:пЕһ-1а5+-сһі14(4). Если ваш ответ заключается в том, 
что это обобщение :оп1у-сһі1а для выбора элементов списка, когда их общее 
количество равно четырем, то вы слишком оптимистичны. Мы еще не достигли 
желаемой цели, хотя уже находимся на правильном пути. Попробуйте думать 
об этих псевдоклассах по отдельности: мы ищем элементы, которые подходят 
под оба условия: и :Е1г$&-сП11а, И :пЕһ-1а5ѕ-сһі14(4). Следовательно, нас 
интересуют элементы, одновременно являющиеся первым потомком своего 
родителя, если считать от начала, и четвертым потомком, если считать от 
конца. Какие элементы удовлетворяют этим критериям? 


Ответ прост: первый элемент в списке, состоящем в точности из четырех эле- 
ментов (рис. 7.9). Это не совсем то, чего мы хотели, но очень близко: поскольку 
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В этом разделе мы будем 
использовать селекторы 
:пЕһ-сһі1а(), но обсуждение 
в равной степени применимо 
и к селекторам :пЕН-о+- 
+уре(), которые нередко ока- 
зываются лучшим выбором, 
так как чаще всего братья 
принадлежат к разным типам, 
а нас интересует только один. 
В примерах мы будем рабо- 
тать с элементами списка, но 
обсуждаемые методы также 
можно использовать и с эле- 
ментами любого другого типа. 


Рис. 7.9. Какие элементы 
попадают в выборку при 
использовании !1:Йг${- 
сАа:пһ-/аѕ-сһ!(4) на списке 
из трех, четырех и восьми 
элементов 
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теперь мы знаем, как выделить первого потомка 
в таком списке, мы можем использовать общий ком- 
бинатор потомков (~) для выбора каждого потомка, 
следующего за таким первым потомком. По сути, 
мы выберем все элементы в списке в том и только 
том случае, когда список состоит из четырех эле- 
ментов, а это как раз то, чего мы пытаемся добиться: 


11: 175% -сИ11А: пЕһ-1аѕ+-сһі14(4), 
11:#ігѕ1-сһі1а:пЕһ-1аѕ&-сһі1а(4) ~ 11 { 
/* Выбор всех элементов списка, если список 
содержит ровно четыре элемента */ 


Для того чтобы избежать разрастания кода и по- 
вторений в продемонстрированном выше реше- 
нии, можно прибегнуть к помощи препроцессора, 
такого как 5С55, хотя синтаксис существующих 
препроцессоров для подобных вещей довольно 
неповоротлив: 


5С55 


/* Определение примеси */ 
@тіхіп п-ібетѕ (Фп) { 
&: ҒігѕЕ-сһі1а:пЕһ-1аѕ+-сһі1а(#{%п}), 
&:Ғігѕ+-сһі1а:пЕһ-1аѕ+-сһі14(#{%п}) ~ & { 
@соп+еп+; 
} 
} 


/* Использовать так: */ 
11 { 
@іпс1иде п-1ет$ (4) { 
/* Свойства и значения */ 


} 


Спасибо Андрэ Луису (Апагё 15, Һёёр://апагЗ.пеї) за идею, по- 
служившую вдохновением для данной техники (ћір://апагЗ.пеё/ 
Ыіод/роѕї/142). 


Благодарности 
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Выбор по диапазону количества смежных элементов 


В самых практичных приложениях мы хотели бы 
задавать не конкретные количества элементов, а не- 
кие диапазоны. Есть удобный трюк, позволяющий 
заставлять селекторы : пєһ-сһі1а() выбирать диа- 
пазоны, например: «все после четвертого потомка». 
Помимо обычных чисел, в качестве параметров для 
них можно также указывать выражения в формате 
ап+Ь (скажем, : пЕһ-сһі14(2п+1)), где п — переменная 
в диапазоне от 0 до +оо в теории (на практике значе- 
ния после определенного лимита перестают выби- 
рать что-либо, так как количество элементов у нас 
конечно). Если мы используем выражение в форме 
п+Ь (подразумевается, что а равно 1), то не существу- 
ет положительного целого п, которое могло бы дать 
нам значение, меньшее Б. Следовательно, выражения 
в форме п+ь можно использовать для выбора всех 
потомков, начиная с 6-го и дальше. Например, : пёћ- 
сһі14(п+4) выбирает всех потомков, за исключением 
первого, второго и третьего (рис. 7.10). 


Рис. 7.10. Какие элементы попадают в выборку при 
использовании 1і:піћ-сћ4(п+4) на списке из трех, четырех 
и восьми элементов 


СОВЕТ 


Разобраться, как правильно 
применять селекторы : пЕһ-*, 
может быть невероятно 
сложно. Если вы столкнулись 
с проблемами, то можете 
воспользоваться интерактив- 
ным тестовым приложением, 
позволяющим поэкспери- 
ментировать с несколькими 
выражениями. Написанное 
мной вы найдете на странице 
Һ@р://Іеа.уегои.те/аетоѕ/пёћ. 
ті, но в Сети также суще- 
ствует множество других. 


ГА ГА ГА ГА 
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Рис. 7.11. Какие элементы 
попадают в выборку при 
использовании 1і:йгѕі- 
сАа:пћ-/аѕі-сһа4(п+4), 

1: Агее-сАа:пёһ-/аѕ-сһ4(п+4) 
~ |і на списке из трех, 
четырех и восьми элементов 


Мы можем использовать это полезное качество для выбора элементов списка 
в ситуации, когда общее количество элементов составляет четыре или больше 
(рис. 7.11). В данном случае в качестве выражения, передаваемого :пёһ-1аѕ+- 
сһі1а(), следует использовать п+4: 


11:#151-сһі1а: пЕһ-1аѕ-сһі14(п+4), 
11:Ғ#ігѕ-сһі1а:пЕһ-1аѕ+-сһі14(п+4) ~ 11 { 
/* Выбор всех элементов списка, если список содержит 
по меньшей мере четыре элемента */ 
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Рис. 7.12. Какие элементы 
попадают в выборку при 
использовании |і: йгѕі- 
сАа:пһ-/аѕ -сһа(-п+4), 
ї:Агее-сАа:пһ-/аѕ-сһа(-п-+4) 
~ |і на списке из трех, 
четырех и восьми элементов 


Схожим образом, выражения в форме -п+6 можно 
использовать для выбора первых Ы элементов. То 
есть для выбора всех элементов списка в том и толь- 
ко том случае, если общее количество элементов 
в одном и том же списке равно четырем или менее, 
мы бы написали: 


11: +175&-си114: пЕһ-1аѕ+-сһі19(-п+4), 
11:#іе51-сһі1а:пЕһ-1аѕ&-сһі1а(-п+4) ~ 11 { 
/* Выбор всех элементов списка, если список 
содержит максимум четыре элемента */ 


Разумеется, мы бы могли объединить два решения, 
но код при этом станет еще более тяжеловесным. 
Предположим, что мы хотим выбрать все элементы 
списка, когда в списке содержится от 2 до 6 эле- 
ментов: 


11: 175% -сп114: пЕһ-1аѕ+-сһі14(п+2) : пЕһ-1аѕ-сһі1а(-п+6), 
1їі:#1г51-сһі1а: пЕһ-1аѕ&-сһі14(п+2) :пЕһ-1аѕ&-сһі1а(-п+6) ~ 11 { 
/* Выбор всех элементов списка, если список содержит 
от 2 до 6 элементов */ 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/ѕёуіїпо-51Ыіпд-соипё 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
Ѕејесіогѕ: Һ&р://3.огд/ТВ/ѕеіесёогѕ 


39 Текучий фон, 
фиксированное содержимое 


Проблема 


В последние несколько лет в веб-дизайне набирает популярность новое на- 
правление, которое я называю «текучая ширина фона, фиксированная ширина 
содержимого». Типичные характеристики подобного шаблона включают: 


окна, с разным оформлением фона; 





Ч несколько разделов, каждый из которых занимает всю ширину просмотрового 


О ширина содержимого фиксирована, даже если конкретное значение ширины 


варьируется в зависимости от разрешения экрана, так как для управления 
шириной используются медиазапросы. В некоторых случаях ширина со- 


держимого в разных разделах может различаться. 


Иногда веб-сайт целиком состоит из разделов, сти- 
лизованных вышеописанным образом (рис. 7.15 или 
более изящный вариант на рис. 7.14). Чаще всего 
данный вариант оформления используется только 
для отдельных разделов, в частности нижнего ко- 
лонтитула (рис. 7.13). 


Самый распространенный вариант реализации по- 
добного дизайна заключается в использовании двух 
элементов для каждого раздела: один для текучего 
фона, а второй для содержимого фиксированной 
ширины. Второй элемент выравнивается по центру 
с помощью тагвіп: аиёо. Например, разметка для 
такого нижнего колонтитула может выглядеть при- 
близительно так: 





Рис. 7.13. На веб-сайте 
популярного сервиса аренды 
квартир Ир://атбпЬ. сот 
этот шаблон применяется 

в нижнем колонтитуле 
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Ріаһіѕ 


Яоита-елір 


лсе паши 


бал Утосясо (870) 


песе певеоу 


Сотраге пипагедз ої їгамеі зйеѕ а! опсе. 
Род {ће Беѕї деаіѕ (а5їег. 






т Е в 





Зал Рудно уче $97» . Ш Ома Рек 503. 





Рис. 7.14. На популярном веб-сайте для путешественников ПЁр://КауаК.сот данный шаблон ис- 
пользуется для оформления всей домашней страницы, но очень изящным ненавязчивым способом 


НТМЕ 
<Фоофег> 
<аім с1аѕ5="мгаррег" > 
<!-- Здесь находится содержимое нижнего колонтитула --> 
</аім> 
</+оофег> 


С$$-код обычно включает правила, структурированные как в примере ниже: 


Ғоо+ег { 
Баскёгоипа: #333; 
} 
.мгаррег { 
тах-міаёһ: 900рх; 
тагріп: 1ет аи+о; 
} 


Не забывайте в функ- 
(Г) ЦИИ са1с() вокруг 

всех операторов - и + 
добавлять пробелы, иначе 
ваш код вернет ошибку при 
разборе! Причина этого 
странного правила кроется 
в обеспечении совместимости 
в будущем: возможно, позд- 
нее в са1с() будут разреше- 
ны идентификаторы, а они 
могут содержать дефисы. 


Выглядит знакомо? Большинству веб-дизайнеров 
и разработчиков приходилось на том или ином этапе 
своей карьеры писать подобный код. Действительно 
ли дополнительные элементы — это неизбежное зло 
или современный уровень С$5 позволяет избежать 
их использования? 


Решение 


Давайте подумаем, какую роль в данном случае 
играет тагвіп: аџёо. Поле, которое создается этим 
правилом, равно половине ширины просмотрового 


39. Текучий фон, фиксированное содержимое 


окна за вычетом половины ширины страницы. Так 
как процентные значения у нас завязаны на ши- 
рину окна просмотра (при условии, что у него не 
существует предка с явно определенной шириной), 
в нашем случае это выглядит как 50% - 450рх. Однако 
функция са1с(), определенная в С$$ Уаіиеѕ апі 
Опи$ Геуе] З (Һр://3.огд/ТВ/сѕѕ-үаіиеѕ-3/#саіс), по- 
зволяет использовать такие простые математические 
выражения прямо в таблице стилей. Заменив аифо на 
са1с(), мы получим такое правило-обертку: 


.мгаррег { 
тах-міаєһ: 9@0рх; 
тагвіп: 1ет са1с(50% - 4509рх); 


Единственная причина, почему нам требовался 
второй элемент-обертка, — необходимость при- 
менять волшебное ключевое слово аифо к его полю 
посредством свойства тагвіп. Однако мы избавились 
от колдовства и заменили его обычным са1с(), то 
есть теперь это всего лишь еще один размер в С$5, 
который можно указывать для любого свойства, при- 
нимающего подобные значения. Таким образом, при 
желании мы можем использовать его с родительским 
элементом в свойстве рада1 тв: 


Ғоо+ег { 
тах-міаєһ: 9@0рх; 
райаіпе: 1ет са1с(50% - 450рх); 
Баскёгоипа: #333; 


} 
.мгаррег {} 


Как вы видите, благодаря этому мы убрали весь 
С$8-код из обертки, что означает, что она нам боль- 
ше не требуется и мы можем спокойно удалить ее 
из нашей разметки. Мы создали требуемый стиль 
безо всяких лишних элементов НТМГ.. Можно ли 
дополнительно улучшить его? Как всегда, ответ 
положительный. 


Обратите внимание, что если закомментиро- 
вать объявление міа+һћ, то ничего не произойдет. 


279 


ОЦЯ 5ТОВУ 


ТНЕ 5ОШАСЕ ОЕ ОША 
1МРІЛАТЮМ 


ТНІМКІМС СВЕЕМ 


ОЦА МІМЕВУ — 





Рис. 7.15. Превосходный 
веб-сайт ирландской 
винодельни Сопо Ѕиг 
\Мпеуага$ апа \Міпегу (Һ&р:// 
сопоѕигіе) — пример 
интенсивного использования 


этого шаблона 
(Г) этого решения забив- 
ка может вовсе исчез- 
нуть, если ширина экрана 
окажется меньше ширины 
содержимого. Но это можно 
поправить с помощью медиа- 
запросов. 


При использовании 
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Рис. 7.16. На веб-сайте А№еЯ 
(ћрѕ://ммум.аігедарр.сот), 
популярного приложения для 
Мас 05, предназначенного 
для повышения производи- 
тельности работы с компью- 
тером, также используется 
этот стиль 


Визуальный результат будет точно таким же, и по- 
ведение тоже не изменится, независимо от размера 
окна просмотра. Почему же? Потому что забивка, 
равная 50% - 450рх, все равно оставляет только 
9дәрх (2 х 450рх) доступного пространства. Мы бы 
увидели отличия, если бы значение мій+һ отлича- 
лось от 99@рх в большую или меньшую сторону. Но 
мы в любом случае получаем именно 9@0рх, поэтому 
объявление ширины избыточно, и мы можем убрать 
его, следуя заветам ОКУ. 


Еще одно усовершенствование не помешало бы, 
чтобы обеспечить обратную совместимость. Нам 
следует добавить резервное решение, чтобы полу- 
чать хоть какую-то забивку в ситуации, когда са1с() 
не поддерживается: 


Фоофег { 
рааа1т=: 1ет; 
радаӢіпе: 1ет са1с(50% - 450рх); 
Баскёгоипа: #333; 


< 


Готово! Мы добились гибкого, соответствующего 
принципам ОБУ и обеспечивающего обратную со- 
вместимость результата, написав всего лишь три 
строки С$8-кода безо всякой лишней разметки! 


ПОПРОБУЙТЕ САМИ! 
НЕр://р!ау.с555есге/ю/Яи-Яхе@ 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Машие$ & Опіѕ: ВЕр://м/3.огд/ТВ/с$5-маие$ 


40 Центрирование по вертикали 


Проблема 


44 года назад мы высадили человека на Луне, но до сих пор не можем центри- 
ровать объекты по вертикали в С$$. 


— Джеймс Андерсон (Јатеѕ Апдегзоп, 
Вр: //бм/ ег сот/]за/5{а{и$/358603820516917249) 


Центрировать элементы по горизонтали в С55 невероятно просто: если это 
строковый элемент, то мы применяем +ех*-а11вп: сепїег к его предку, а если 
это блочный элемент, то мы применяем тагріп: аџёо к нему самому. Но одной 
мысли о том, чтобы центрировать элемент по вертикали, достаточно, чтобы по 
спине пробежали холодные мурашки. 


С годами центрирование по вертикали превратилось в «святой грааль» С55 
и «семейную шутку» разработчиков внешних интерфейсов. И это понятно, 
ведь здесь налицо все необходимые причины: 


О это то, что требуется разработчикам очень часто; 


О это звучит чрезвычайно просто в теории; 





О на практике это было невероятно сложно, особенно для элементов с пере- 
менными габаритными размерами. 


Разработчики внешних интерфейсов уже исчерпали свою фантазию в попытках 
придумать новые выходы из этого тупика, и большинство придуманных ими 
решений ужасающе грязные. В этом секрете мы исследуем некоторые из лучших 
современных техник, позволяющих реализовать вертикальное центрирование 
в любых ситуациях. Обратите внимание, что несколько существующих по- 
пулярных техник здесь не упоминаются по разным причинам: 
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О метод с табличным макетом (использующий режимы отображения таблиц) 
не включен, так как требует нескольких лишних элементов НТМГ; 





О метод со строковым блоком не включен, так как, на мой вкус, он слишком 
грязный. 


Однако если вам интересно, вы можете прочитать об обеих этих техниках в ве- 
ликолепной статье Криса Койера Сещепия т фе ИпЁпоюп (Һр://сѕѕігіскѕ.соту/ 
сепќегіпо-іп-ће-ипкпомт). 


Если не указано иное, мы будем использовать следующую разметку прямо вну- 
три элемента <Боду>, хотя решения, которые мы собираемся изучить, должны 
работать вне зависимости от выбранного вами контейнера: 


НТМІ 


Селіег те, ресе! <таіп> 
<ћ1>Ат І сепфегей уе? </һ1»> 
<р>Сепеег ме, р1еазе!</р> 
</та1п> 


Ат І сепіегеа уеіё 





Мы также применим несколько простейших правил 
Рис. 7.17. Наша отправная С$5 для оформления фона, забивки и т. п., чтобы 
точка наша отправная точка выглядела как на рис. 7.17. 


Решение с абсолютным позиционированием 


Одна из ранних техник вертикального центрирования требовала фиксирован- 
ных значений ширины и высоты: 


таіп { 
роѕіёіоп: арѕо1и+е; 
Фор: 50%; 


Іеғё: 50%; 

маг21п-Фор: -Зет; /* 6/2 = 3 */ 
маг51п-1е+: -9ет; /* 18/2 = 9 */ 
міаһ: 18ет; 

һеірһ+: беп; 


По сути, здесь мы помещаем верхний левый угол элемента в центр окна про- 
смотра (или ближайшего по расположению предка), а благодаря отрицательным 
значениям полей, равным половине ширины и высоты элемента, перемещаем 
его вверх и влево, так, чтобы центр элемента совпал с центром просмотрового 
окна. С помощью са1с() это решение можно сделать на два объявления проще: 
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таіп { 
роѕітіоп: абѕо1и+е; 
фор: са1с(50% - Зет); 
Іеғі: са1с(50% - 9ет); 
міаһ: 18ет; 
һеірғһЕ: бет; 


Очевидно, что самая большая проблема этой техники в том, что она зависит от 
фиксированных габаритных размеров, тогда как нам часто требуется центри- 
ровать элементы, размеры которых определяются их содержимым. Если бы 
только мы могли использовать процентные значения, разрешающиеся в габа- 
ритные размеры элемента, наша проблема была бы решена. К сожалению, для 
большинства свойств С$5 (включая тагріп) процентные значения разрешаются 
относительно габаритных размеров родительского элемента. 


Как это часто бывает с С$$, решения приходят из самых неожиданных мест. 
В данном случае нам могут помочь трансформации С55. Когда мы исполь- 
зуем процентные значения в трансформациях +гап$1а*е(), мы перемещаем 
элементы относительно их собственных ширины 
и высоты — а это в точности то, что нам нужно! 
Таким образом, мы можем заменить отрицательные 
смещения, жестко кодирующие габаритные размеры асет 
наших элементов, трансформациями С$$, основан- А Ел 
ными на процентных значениях. Это позволит нам 

избавиться от жестко закодированных значений: 





таіп { Рис. 7.18. Вертикальное цен- 
роѕіёіоп: арѕо1и+е; трирование без указания кон- 
Фор: 50%; кретных габаритных значений 
Т1е+е: 50%; благодаря нашему трюку 
{гап$Фогт: ёгапѕ1а+е(-50%, -50%); с трансформациями С55 

} 


Селіег те, ріеаѕе! 


Результат вы можете видеть нарис. 7.18, но там нет 
ничего удивительного: контейнер идеально выров- а 


Сегіег те, р!еазе! 
нен по центру, как и ожидалось. Т 
Селіег те, ріесѕе] 


Сепіег те, ріеаѕе! 


Разумеется, ни одна техника не идеальна, и у этой ВЕН 


Сепіег те, ріеаѕе! 


также есть несколько недостатков: Сепіег те, рівсве! 


Сепіег те, ріеаѕе! 





О во многих ситуациях абсолютное позиционирова- 
ние применять невозможно, так как оно способно РИС. 7.19. Если элемент, 


радикально изменить весь макет целиком; Е 
центрировать по вертикали, 


Ч если центрируемый элемент выше своего про- выше своего окна просмотра, 
смотрового окна, то он обрезается сверху 70 он обрезается сверху 
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(рис. 7.19). Справиться с этим можно несколькими способами, но все они 
невероятно грязные; 


О внекоторых браузерах это может привести к тому, что элементы выглядят 
слегка нечеткими, так как позиционируются с точностью до половины пиксела. 
Это можно исправить, применив ігапѕҒогт-ѕ&у1е: ргезегуе-3За, но это грязный 
трюк, и невозможно гарантировать, что он продолжит работать в будущем. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/мегіїсаі-сепёегіпо-аБѕ 


Как выяснилось, очень трудно отследить, кто первым додумался 
до этого полезного трюка, но самым ранним источником кажется 
пользователь веб-сайта 5{аскО\егНоми (Һр://5аскоуегом.сот) 
с псевдонимом Сһакііе (НЕр://${аскоуег Яоми.сот/изег$/479836/ 
сһапіе), который опубликовал описание в ответе на вопрос Аіідп 
уегисаПу итд С55 3? (ВЕр://5аскомео\ми.сот/а/16026893/90826) 
16 апреля 2013 года. 


Благодарности 


Решение с единицами измерения просмотрового окна 


Дажеесли бы мы хотели избежать абсолютного позиционирования, мы все так 
же можем использовать трюк с трансформацией +гапѕ1а+е(), для того чтобы 
перемещать элемент на половину его ширины и высоты. Но как в этом случае 
задать изначальное смещение на 50% от верхнего левого угла контейнера, не 
используя Іеғ+ и ор? 


Первой мыслью могло бы быть использование процентных значений со свой- 
ством таг81т, например так: 


таіп { 
міаһ: 18ет; 
райдіпе: 1ет 1. бет; 
таг51п: 50% аифо 0; 
{гап$Фогт: Егапѕ1аёеү(-50%) ; 


Однако, как вы видите на рис. 7.20, это дает несколько странный результат. 
Причина в том, что процентные значения в свойстве тагріп вычисляются 
относительно ширины его родительского элемента. Да, даже проценты для 
таг21п-Еор и тагвіп-Боёёот! 
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К счастью, если мы пытаемся центрировать элемент 
относительно окна просмотра, у нас ещеесть надеж- 
да. В спецификации С$$ Уаше$ апа Опиз Геуе! 3 
(Һр://м3.огд/ТВ/сѕ5-уаіиеѕ-3/#уіемрогі-геіаїіуе-Іепоёһѕ) 
определяется семейство новых единиц измерения — 
значений, завязанных на размер просмотрового окна: 


О ум относится к ширине просмотрового окна. 
Вопреки ожиданиям, 1ум обозначает 1% ширины 
просмотрового окна, а не 100%; 


О аналогично ум, 1%һ представляет 1% высоты про- 
смотрового окна; 





Ч 1утіп эквивалентно 1\м, если ширина просмотро- 
вого окна меньше его высоты; в противном случае 
это значение эквивалентно 1уһ; 


О 1утах эквивалентно 1\м, если ширина просмотро- 
вого окна больше его высоты; в противном случае 
это значение эквивалентно 1м1. 


В нашей ситуации для задания ширины полей нам 
требуется мп: 


таіп { 
міаһ: 18ет; 
райдіпе: 1ет 1.5ет; 
тагріп: 50Өуһ аџ+о 9; 
їгапѕҒогт: Еғгапѕ1аёеү(-507%); 


Как подтверждает рис. 7.21, это решение работает 
безупречно. Разумеется, возможности применения 
данной техники сильно ограниченны, так как един- 
ственная задача, решаемая здесь, — это центриро- 
вание по вертикали относительно окна просмотра. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/мегіїсаі-сепёегіпо-мһ 
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Ат | сепіегеа уе! 


Сепіеғ те, ріеаѕе! 


Рис. 7.20. Попытка 
сослаться на габаритные 
размеры просмотрового 
окна с помощью процентных 
значений в свойстве тагдіп 
не приводит к желаемому 
результату 


Обратите внимание, что, ис- 
пользуя значения, определя- 
емые относительно размеров 
просмотрового окна, можно 
также создавать полноэкран- 
ные разделы, совершенно 

не прибегая к помощи сце- 
нариев. Более подробное 
описание вы найдете в статье 
Эндрю Скора Маке їи!! ѕсгееп 
Ѕесііопѕ мйһ 1 те ОЁ С55 
(Апагем СКог, Һр://теаіит. 
сот/@ског/такКе-Ги|-сгееп- 
ѕесііопѕ-Уіһ-1-1іпе-оЁ-сѕ- 
682227с75сБа). 


Ат | сепіегеа уе! 


Сепіег те, ріеаѕе! 


Рис. 7.21. Использование 
50%һ в качестве размера 
верхнего поля решает нашу 
проблему, и теперь элемент 
успешно центрируется 

по вертикали 
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Решение с гибким полем 


Это, несомненно, наилучшее из доступных решений, так как гибкое поле (спе- 
цификация Нехох, И р://м/З.ога/ТВ/с$$-НехБох) разработано специально для 
помощи в подобных ситуациях. Единственная причина, почему мы все еще 
рассматриваем другие решения, заключается в том, что прочие методы лучше 
поддерживаются браузерами, хотя и у гибкого поля достаточно хорошая под- 
держка современными браузерами. 


Все, что нам требуется, — это два объявления: 41$р1ау: #1ех на родительском 
элементе относительно центрируемого (в нашем примере это элемент <Боау>) 
и уже знакомый нам тагріп: аифо на дочернем, который мы центрируем (в на- 
шем примере это <та1п>): 


Боду { 
аіѕр1ау: Е1ех; 
тіп-һеірһ: 100уһ; 


маг51т: 0; 
} 
таіп { 

таг51п: аи+о; 
} 


Обратите внимание, что при использовании гибкого поля тагріп: аџёо вы- 
равнивает элемент по центру не только по горизонтали, но и по вертикали. 
Также обратите внимание, что нам даже не пришлось задавать ширину (хотя 
при желании мы могли бы это сделать): присвоенная ширина эквивалентна тах- 
сопфеп*. (Помните ключевые слова для определения размера изнутри, о которых 
я рассказывала в секрете «Определение размера изнутри» ?) 


Если гибкое поле не поддерживается, то результат выглядит в точности так 
же, как наша отправная точка на рис. 7.17 (если задано конкретное значение 
ширины), что вполне допустимо, даже если желаемого вертикального центри- 
рования мы не добились. 


Еще одно преимущество гибкого поля заключается в том, что с помощью него 
можно вертикально центрировать анонимные контейнеры (то есть текст безо 
всякой обертки). Например, если бы мы использовали такую разметку: 


НТМЕ 
<та1п>Сепфег ме, р1еаѕе! </таіп>» 
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то могли бы задать фиксированные значения для 
паіп и выровнять текст по центру прямо внутри это- 
го тега, используя свойства а1івп-ібетѕ и јиѕ+і+у- 
сопёепё, которые были добавлены в спецификации 
ЕІехБох (рис. 7.22): 


таіп { 
915р1ау: Ғ1ех; 
а11вп-14ет$: сепфег; 
јиѕіі+у-сопіеп: сеп+ег; 
міаһ: 18епт; 
һеівһЕ: 10епт; 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/мегіїсаі-сепёегіпдо 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 

С55 Тгапѕѓогтѕ: Һр://%3.0гд/ТВ/с55-їгапѕѓогтѕ 

С55 Маіиеѕ & Опіѕ: Һр://%3.огд/ТЕ/с55-үаіиеѕ 

С55 Еехібіе Вох Гауоиї: ВЁр://м/З.ога/ТВ/с$5-ПехБох 
С55 Вох АЇідптепё: Һр://%3.огд/ТЕ/с55-аіідп 


БУДУЩЕЕ. 
ВЫРОВНЯТЬ ВСЕ! 





Рис. 7.22. Использование 
гибкого поля для центриро- 
вания анонимных текстовых 
полей 


Те же свойства можно было 
бы использовать и с <Боду> 
для центрирования элемента 
<та1п>, но подход С тагріп: 
аи+о элегантнее, а также обе- 
спечивает обходной путь 


Как уже запланировано в спецификации С5$ Вох АйаптепЕ еме! 3 (ћр:// 
м3.0г9/ТВ/сѕ-аіідп-3), в будущем нам не придется использовать другой ре- 
жим разметки для обеспечения возможности вертикального центрирования. 
Мы сможем делать это, используя простую строку кода: 


а1івп-ѕе1+: сепфег; 


Она будет работать независимо от того, какие другие свойства определе- 
ны для элемента. Кажется, что это слишком хорошо, для того чтобы быть 
правдой, но совсем скоро вы сможете использовать это решение в любимом 
браузере! 
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ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Единицы измерения, завязанные на окно просмотра (см. секрет «Центри- 
рование по вертикали»), функция са1с() 


В частности, эта проблема П роблема 


возникает на страницах, со- 


держимое которых короче Е 
Это одна из старейших и самых известных проблем 
высоты просмотрового окна 


НОТУ СОТЬННИ КИ СЕО веб-дизайна. Она встречается настолько часто, что 
колонтитула. большинство из нас обязательно сталкивались 
с ней в тот или иной момент своей карьеры. В двух 
словах смысл ее таков: нижний колонтитул с лю- 
бой блочной стилизацией, такой как фон или тень, 
прекрасно работает, когда содержимое достаточно 
длинное, но ломается на коротких страницах (таких, как сообщения об ошиб- 
ке). Поломка выглядит так, что нижний колонтитул «прилипает» не к нижней 
кромке окна просмотра, как нам хотелось бы, а к нижней кромке содержимого. 


Объясняется такая популярность этой проблемы не только ее вездесущностью, 
но также тем, насколько обманчиво простой она кажется с первого взгляда. 
Это классический случай задачи, на решение которой приходится затратить 
намного больше времени, чем поначалу ожидалось. Помимо этого, средствами 
С95 2.1 она все еще не решается: практически все классические решения тре- 
буют указывать фиксированную высоту нижнего колонтитула, что надуманно, 
а зачастую попросту невозможно. Кроме того, все эти решения чрезмерно 
сложные, грязные и предъявляют специфические требования к разметке. 
Но тогда ничего лучше в нашем распоряжении не было, учитывая ограничения 
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С$5 2.1. Однако с современным С5$ мы можем намного больше! Так как же 
решить задачу? 


Решение с фиксированной высотой 


Мы будем работать с очень простой страницей, внутри элемента <Боду> которой 
содержится следующая разметка: 


НТМЕ 


<пеадег> 
<һ1>5іёе паме</ћ1> 
</һеайег»> 
<та1п> 
<р>Васоп Ірѕит 4010г 51+ аме... 
<!-- Текстовая забивка с веб-сайта басопірѕит. сот --></р> 
</таіп> 
<Фоофег> 
<р>© 2015 Мо гівһіѕ гезегуед.</р> 
<р>Маде міһ % Бу ап апопутоиѕ 
разфаФаг1ап.</р> 


Если вам никогда не при- 
ходилось рвать на себе во- 
лосы, погружаясь в дебри 
существующей литературы 


„ на эту тему, то вот несколь- 
Мы также определили несколько простых стилей 
ко популярных ссылок, где 


для нашей страницы, в том числе добавили фон а ЕТ ӨНИсаНИВ Часте 

к нижнему колонтитулу. Ее текущий вид представ- — используемых решений, 

лен на рис. 7.23. Теперь давайте немного уменьшим не раз выручавших веб- 
объем содержимого. Результат этой операции вы разработчиков до того, как 
видите на рис. 7.24. Проблема липкого нижнего Спецификации С55 Гехе! 3 по- 
колонтитула во всей красе! Великолепно, мы вос- ЯВИЛИСЬ хотя бы в проекте: 
произвели проблему, но как нам ее решить? Һр://сѕѕ5їіскуѓооїегсот 


< /Ғооїег> 


Предположим, что текст в нижнем колонтитуле П@р://гуапѓаі.сот/ѕіўску-ѓооќег 
никогда не будет переноситься на новую строку. Һр://сѕѕ-ігіскѕ.соту/ѕпірреїѕ/ 
Тогда мы можем вычислить его высоту в формате, сѕѕ/ѕііску-ѓооїег 


подходящем для использования в С$5-коде: ооо 


Ыі09/2011/09/5їску-сѕѕ- 


2 строки х высота строки + З х поле абзаца + 
р р |. Ғооѓегѕће-Пехібіе-мау 


+ забивка по вертикали = 


=9 х 1. 5ет + З х 1ем + 1ет = 7ем Һір://туѕіга.аұ/тодегп-сіеап- 
сѕѕ5ііску-ѓооѓег 


Аналогично, высота заголовка равна 2.5ет. Сле- Последние два упрощены до 
довательно, используя единицы измерения, при- невозможности, но все же на- 
вязанные к окну просмотра, и функцию са1с(), кладывают собственные огра- 
мы можем «прилепить» наш нижний колонтитул ничения использования. 
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Ѕіќе пате 


Васоп ірѕит доіог і ате ќшжеу уетат папке, 
сира зной: 16$ Кемп ЕБопе оссаесаї. ЕЁ ІаБогиті 
уепбоп поѕітий, и мепіат зіп КеБаѕа шатсо 
рапсена. Ош агитейск (аі, Басоп|еБеказ һошійег 
сарісоіааБогит. Міпіт ірзит Басоп, пойИЧабой5 
ропе рапаци: Нат һоск гергећепаепі зіп Беей, 
заизаде рід еіистой Бопе зћапиіе зшр ѕіеак. 


Сом епіт ехсеріеш; Бои йојоге Іогет тадпа 
Хисїас сопзедиа моїирѓаѓе. Рісапћа ла сћіскеп, 
сиріт аідшр тадпа Не: тідпоп ргоѕсіиќо иб 
позитив. Кеаза гитр папкичег зип соте Бееѓ. 


14. Сһіскеп зипЕ пісі (етрог зей. Іп еіито поп 
Хафаск 1етрог ќепаепоіп раѕітаті ааїрізісіпо сом 
1огет и ќай Девку сиріаќас чепіѕоп. Јом! сопзедиа 
соттоо рок Іоіпірѕит рогк Бейу ргозсіцќо аџќе 
рее Ва! пір ѕпоџіегадџа, (иоїасІапајаедег Кемп 
рок спор БеегиЬз1еБеказ һатЫшдег сіПит шеу 
и допег сшра. 


©2015 Мо пам гезегуеа, 


Маде мИ® О Буапапопутоиѕ раѕіаѓапап. 





Рис. 7.23. Как наша простая 
страница выглядит, когда со- 
держимое достаточно длинное 


Ѕіќе пате 
Васоп ірѕит доіог 5 ате ќийеу мепіат эВапКе, 


сшра ѕћог 65 Кемп Бопе оссаесаї, ЕЁ ІаБогит 
мепіѕоп поѕітий, и метал зи. 


©2015 №о гідћіѕ гезегуеа, 
МаЧе ми [Бу ап апопутоиѕ раздавала. 


Рис. 7.24. Проблема липкого 
нижнего колонтитула во всем 
великолепии 


5Ке пате 


Васоп ірѕит доіог зі: ате (шгкеу уепіат ѕћапКіе, 
сира злой: 165 Кемп Бопе оссаесае. Е ІаБогит 
мепіѕоп поѕітий, и уепіат зіп. 


СА 


Маде мИВ 0 Бу ап апопутоиѕ рамайапап. 





Рис. 7.25. Нижний 
колонтитул после того, как 
мы приклеили его к нужному 
месту с помощью С55 
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к нижней кромке, используя, по сути, одну строку 
С55$-кода: 


таіп { 
тіп-һеіеһі: са1с(100үһ - 2.5ет - 7ет); 
/* Нужно избежать забивки/рамок и прочих 
игр с высотой: */ 
Бох-$121п8: Богаег-Бох; 


В качестве альтернативы мы могли бы создать оберт- 
ку вокруг наших элементов <һеадег»> И <та1п>, для 
того чтобы оставалось только вычислить высоту 
нижнего колонтитула: 


#игаррег { 
тіп-һеіеһё: са1с(100\й - 7ет); 
} 


Это работает (рис. 7.25), и присущий данному ре- 
шению минимализм делает его несколько лучше 
существующих решений с фиксированной высотой. 
Однако оно совершенно непрактично, и его невоз- 
можно использовать нигде, кроме веб-сайтов с самы- 
ми простыми вариантами разметки. Оно основано на 
предположении, что в нижнем колонтитуле не будет 
переносов строки, значение тіп-һеірһё необходимо 
корректировать каждый раз, когда меняются раз- 
меры нижнего колонтитула (то есть о принципах 
ОКУ можно забыть), и если только мы не согласны 
обернуть наш заголовок и содержимое в еще один 
элемент НТМГ, те же вычисления и модификации 
необходимо делать также и для заголовка. Опреде- 
ленно, в наши дни должен существовать лучший 
путь! 


ПОПРОБУЙТЕ САМИ! 
НЕр://р!ау.с555есге.ю/°Нску-Гоофег-Яхеа 
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Гибкое решение 


Гибкое поле идеально подходит для решения по- 
добных задач. Мы можем достичь превосходной 
гибкости с помощью всего нескольких строк С$5- 
кода, и нам не потребуются корявые вычисления 
и дополнительные НТМТ-элементы. Во-первых, мы 
должны применить 915 р1ау: Ғ1ех к элементу <Боду>, 
так как это родительский элемент всех трех наших 
главных блоков. Это включит разметку гибкого поля 
для всех них. Также нам нужно для свойства #1ех- 
Ғ1ом установить значение со1итп, иначе блоки будут 
выводиться друг за другом по горизонтали в одной 
строке (рис. 7.26): 


Боду { 
915р1ау: Ғ1ех; 
Ғ1ех-Ғ10м: со1итп; 


Пока наша страница выглядит практически так же, 
как до применения всех этих хитростей гибкого 
поля, так как каждый элемент растянут на всю ши- 
рину просмотрового окна, а его размер определяется 
его содержимым. Ну конечно, ведь мы же еще не 
воспользовались преимуществом гибкого поля! 


Для того чтобы чудо произошло, нам нужно задать 
значение 1009\п для свойства тіп-һеірһ+ элемента 
<Боду>, чтобы он занимал по меньшей мере всю вы- 
соту окна просмотра. Пока что результат все так же 
выглядит, как на рис. 7.24, поскольку мы, конечно, 


291 


Соблюдайте осторож- 
(Г) ность, используя сло- 

жение и вычитание 
в функции са1с(): вокруг опе- 
раторов + и - обязательно 
нужно добавлять пробелы. Это 
странное решение было приня- 
то для обеспечения совмести- 
мости в будущем. Если в какой- 
то момент в са1с() разрешат 
использовать ключевые слова, 
синтаксическому анализатору 
С55 нужно будет как-то отли- 
чать дефис в ключевом слове 
от оператора вычитания. 


Васоп 
В ірзит 
5е доог зі 

ате 
пате шкеу теѕегуеа. 
мепіат ео 
зпапке, 
сшра 
зной 165 


м 
я 
Бу 
ап 


Кемп + 


Бопе 
апопутоцз 


оссаесаі. 
раѕќаѓапап, 


Е 
ІаБогит 





Рис. 7.26. Использование 
Пех без применения других 
свойств выстраивает 
дочерние элементы нашего 
элемента в одну строку 


указали минимальную высоту для всего элемента <Боду>, но высота каждого 
поля все так же определяется его содержимым (то есть определяется изнутри, 
если говорить на профессиональном жаргоне С55). 


Мы должны сделать так, чтобы высота заголовка и нижнего колонтитула опреде- 
лялась изнутри но при этом высота содержимого гибко менялась, растягиваясь 
на все оставшееся пространство. Этого можно добиться, задав большее нуля 
(подойдет 1) значение #1ех для контейнера <таіп>: 
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СОВЕТ 


Свойство Е1ех — это со- 
кращение, объединяющее 
свойства Ғ1ех-вгом, Ғ1ех- 
ѕһгіпк и 1ех-Ба$1$. Лю- 
бой элемент, для которого 
определено значение +1ех 
больше ё, становится гибким, 
а кроме того, +1ех управляет 
отношением между габарит- 
ными размерами различных 
гибких элементов. Напри- 
мер, в нашем случае если бы 
для <та1п> мы определили 
Ғ1ех: 2, а для <Роофег> — 
Ғ1ех: 1, то высота содержи- 
мого в два раза превышала 
бы высоту нижнего колонти- 
тула. То же самое произошло 
бы с парой значений 4 и 2 
вместо 2 и 1, так как важны 
не абсолютные значения, 

а отношение между ними. 


Боду { 
аіѕр1ау: Ғ1ех; 
+1ех-11о0м: со1итп; 
тіп-һеіеһі: 100үһ; 


таіп { Ғ1ех: 1; } 


Вот и всё, больше никакой код не требуется! Иде- 
ально липкий нижний колонтитул (визуально наш 
результат выглядит так же, как на рис. 7.25) — и все- 
го лишь четыре простые строки кода! Ну разве не 
чудо это гибкое поле? 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесгеіѕ.іо/ѕёіску-Ғооёег 


Спасибо Филипу Уолтону (РНИр 
Үаіќоп, Һр://рһііруаіќоп.сот) за 
изобретение этой техники (НЁр:// 
рћііруа!іёоп.дієһир .іо/ѕоіуеа-бу- 


Благодарности . 
ПехБрох/аетоѕ/ѕііску-ѓооќег). 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Ніехібіе Вох Гауоиї: ћр://м3.огд/ТЕ/сѕѕ-Йехбох 
С55 Маіиеѕ & Опіёѕ: Һр://%3.огд/ТЕ/с55-үаіиеѕ 


Переходы 
и анимация 
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2 Эластичные переходы 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые знания о переходах С55, базовые знания об анимации С55 


Почему мы используем транс- 
формации, а не какое-нибудь 
другое свойство С55, такое 
как фор или тагріп-+ор? На 
момент написания этой главы 
трансформации создают на- 
много более плавные эффек- 
ты, тогда как прочие свойства 
С55 чаще всего заставляют 
элемент прилипать к пиксель- 
ным границам. 


Проблема 


Эластичные переходы и анимация (то есть пружиня- 
щие переходы) — это популярный способ придания 
интерфейсу жизнерадостности и реалистичности, 
ведь когда объекты движутся в реальной жизни, 
они редко перемещаются из точки А в точку Б, не 
демонстрируя никакой упругости. 


С технической точки зрения пружинящий эффект 
заключается в том, что после того, как переход дости- 
гает конечного значения, он немного отматывается 


назад, затем снова достигает конечного значения, снова отматывается назад, но 
уже на меньшее значение, и так повторяется один или несколько раз до тех пор, 
пока переход окончательно не завершится. Например, предположим, что мы 
анимируем элемент, стилизованный под падающий мяч (рис. 8.1), определяя 
с ПОМОЩЬЮ &гапѕҒогт переход от попе до {гапз1а%е\(350рх). 


Разумеется, элемент может демонстрировать пружинящее поведение не только 
при перемещении по плоскости. Этот эффект способен сделать значительно 
привлекательнее любой тип перехода, включая: 


О переходы, затрагивающие размер (например, можно увеличивать элемент 
при срабатывании : һоуег, отображать растущее в размере диалоговое окно, 
начиная с {гап$Фогт: зса1е(@), анимировать столбики на диаграмме); 
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О переходы, включающие изменение угла (например, вращения или сектор- 
ные диаграммы, секторы на которых посредством анимации вырастают 
с нуля). 


Несколько библиотек Јауа$сгірї содержат встроенные возможности по созда- 
нию пружинящей анимации. Однако сегодня мы более не нуждаемся в помощи 
сценариев для добавления в наши проекты анимации и переходов. Как же тогда 
наилучшим способом реализовать пружинящий эффект средствами С$5? 





_9_9_э9 


Рис. 8.1. Пружинящее движение в реальной жизни 


Пружинящая анимация 


Нашей первой идеей может быть использование анимации С$$ с ключевыми 
кадрами, как в следующем фрагменте кода: 
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@Кеу+гатеѕ Боипсе { 
60%, 80%, То { Егап$Фогт: Егапѕ1а+еү(350рх); } 
70% { +гап$Фогт: ёгапѕ1а+еү(250рх); } 
90% { +гапѕҒогт: Егапз1а+еу(300рх); } 


} 

„.Ба11 { 
/* Размеры, цвета и т. п. */ 
апітаёіоп: Боипсе 35; 

} 


Ключевые кадры в этом фрагменте кода соответствуют шагам, представлен- 
ным на рис. 8.1. Однако если вы запустите эту анимацию, то заметите, что она 
выглядит искусственной. Одна из причин, почему так происходит, — каждый 
раз, когда мячик меняет направление, он продолжает ускоряться, что выглядит 
очень неестественно. Корень зла здесь в том, что функция расчета времени для 
этого объекта одна и та же во всех ключевых кадрах. 


«Функция... чего?» — спросите вы. С каждым переходом и анимацией связана 
кривая, определяющая, как этот эффект развивается с течением времени (так- 
же известная в определенных контекстах под названием сглаживающей кривой 
(еаѕіпе сигуе)). Если вы не указываете функцию расчета времени, то использу- 
ется функция по умолчанию, а это, в противоположность распространенным 
ожиданиям, вовсе не линейная функция — она показана на рис. 8.2. Обратите 
внимание на момент, обозначенный точкой на графике: когда прошла половина 
времени, отведенного для эффекта, переход уже завершился на 80%! 


Функцию расчета времени по умолчанию также можно явно указать с помо- 
щью ключевого слова еаѕе — либо в сокращении апітатіоп/ёгапѕіёіоп, либо 
в свойстве с полным написанием апітаіоп-ёітіпв - Ғипсёіоп /ёгапѕіёіоп-ёітіпе- 
Ғипсёіоп. Однако так как еаѕе — это функция расчета времени по умолчанию, 
пользы от этого мало. Но существует еще четыре 
стандартные кривые, с помощью которых вы можете 
изменить течение анимации; все они показаны на 
(50%, 80%) рис. 8.3. 


Как вы видите, еазе-ои{ — это противоположность 
еаѕе-іп. Это как раз то, что нам требуется для нашего 
пружинящего эффекта: мы хотим менять функцию 


Д расчета времени на противоположную каждый раз, 
5 когда меняется направление движения мячика. Сле- 
= довательно, мы можем указать главную функцию рас- 

ео чета времени в свойстве апіта&іоп и переопределять 
Рис. 8.2. Функция расчета ее в ключевых кадрах. Нам нужно, чтобы основному 
времени по умолчанию направлению движения соответствовала функция 


(сглаживающая функция) для расчета времени с ускорением (еазе-ои*), а обратно- 
всех переходов и анимации му — сзамедлением (еаѕе-іп): 
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(50%, 68%) 








(50%, 32%) 


еаѕе-іп 


Время Время 


Прогресс 


еаѕе-оиЁ 






Прогресс 


(50%, 50%) (50%, 50%) 


9 8 
а Е Ф Р 
5 еаѕе-іп-оиї 5 ]1пеаг 
> [= 
= = 
Время Время 


Рис. 8.3. Доступные ключевые слова, соответствующие стандартным функциям расчета времени 


@Кеу+гатеѕ Боипсе { 
60%, 80%, +о { 
{гап$Фогт: Егапѕ1а+еү(400рх); 
апіта+іоп-+ітіпе - Ғипсёіоп: еаѕе-ои+; 
} 
70% { +гап$Фогт: гапз1а%еу(300рх); } 
90% { тгап$Фогт: гапз1а+еу(360рх); } 


„.Ба11 { 
/* Остальные стили */ 
апітаёіоп: Боипсе 35 еаѕе-іп; 


Если вы протестируете этот код, то заметите, что даже это простое измене- 
ние моментально создает гораздо более реалистичный пружинящий эффект. 
Однако ограничиваться этими пятью стандартными кривыми чрезвычайно 
печально. Если бы мы могли использовать произвольные функции расчета 
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Рис. 8.4. Кубическая кривая 
Безье для спирали; здесь 
показаны узловые точки 

и контрольные точки этой 
кривой 


Прогресс 


Время 


Рис. 8.5. Функция 
расчета времени еаѕе со 
своими узловыми точками 
и контрольными точками 


времени, то достигали бы намного более реали- 
стичных результатов. Например, если пружиня- 
щая анимация предназначена для иллюстрации 
падающего объекта, то более высокое значение 
ускорения (такое, какое обеспечивает нам еазе) 
создает более реалистичный эффект. Но как нам 
создать противоположность еаѕе, если ключевого 
слова для этого не предусмотрено? 


Все эти пять кривых задаются посредством (куби- 
ческих) кривых Безье. Кривые Безье — это кривые, 
с которыми вы работаете в любых приложениях 
для создания векторной графики (таких, как А4оБе 
Шазегабог). Они определяются как наборы сегментов 
пути с манипулятором на каждом конце, позволя- 
ющим управлять их кривизной (эти манипуляторы 
часто называют контрольными точками). Сложные 
кривые содержат огромное количество подобных 
сегментов, соединенных своими конечными точками 
(рис. 8.4). Функции расчета времени С55 — это кри- 
вые Безье с одним только сегментом, поэтому у них 
только две контрольные точки. В качестве примера 
на рис. 8.5 показана функция расчета времени по 
умолчанию (еаѕе) и соответствующие контрольные 
точки. 


В дополнение к пяти стандартным кривым, которые 
мы рассмотрели в предыдущем абзаце, существует 
также функция сиб1с-Бе21ег(), позволяющая ука- 
зывать собственные функции расчета времени. Она 
принимает четыре аргумента, соответствующих 
координатам двух контрольных точек для необхо- 
димой кривой Безье, в формате сибіс-бегіег(х1, 
у1, х2, у2), где (х1, у1) — это координаты первой 


контрольной точки, а (х2, у2) — координаты второй контрольной точки. Ко- 
нечные точки сегмента пути фиксированы: в точке (0, 9) находится начало 
перехода (количество прошедшего времени на нуле, прогресс на нуле), а в точке 
(1, 1) — конец перехода (100% времени прошло, 100% прогресса случилось). 


Обратите внимание, что наличие одного сегмента с фиксированными конеч- 
ными точками — не единственное ограничение. Значения координаты х обеих 
контрольных точек ограничены диапазоном [0, 1] (то есть мы не можем вы- 
нести манипуляторы за пределы графика по горизонтали). Это ограничение 
появилось не случайно. Поскольку мы не можем (пока?) путешествовать во 
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времени, невозможно определить переход, начи- 
нающийся до того, как он будет запущен, или за- 
канчивающийся после отведенного ему промежутка 
времени. Но реальное ограничение здесь только 
одно — это количество узловых точек: возмож- 


ность определять кривые только с двумя узловыми 0%, 30%) 


о 
точками здорово сужает диапазон возможных ре- Е 
зультатов, но также делает функцию сибіс-бегіег() 8 
проще в использовании. Несмотря на эти ограни- Время 


чения, сиріс-беғгіег() позволяет создавать весьма 
широкий диапазон разнообразных функций расчета 
времени. 


Рис. 8.6. Противоположная 
функция расчета времени для 
еаѕе 


Отсюда логически вытекает, что мы может перевер- 

нуть любую функцию расчета времени, поменяв 

местами горизонтальные координаты с вертикальными в обеих контрольных 
точках. Это верно и для ключевых слов; все пять ключевых слов, рассмотрен- 
ных выше, соответствуют определенным значениям сиріс-бегіег(). Например, 
еаѕе — это эквивалент сиб1с-Бе21ег(.25,.1,.25,1), поэтому противоположной 
ей будет сиб1с-Бе21ег(.1,.25,1,.25). Результат показан на рис. 8.6. Таким об- 
разом, теперь в нашей пружинящей анимации мы можем использовать еазе, 
и она будет выглядеть еще реалистичнее: 


@Кеу+гатеѕ Боипсе { 
60%, 80%, +о { 
їгапѕҒогт: Егапѕ1а+еү(400рх) ; 
апітаёіоп-+ітіпе- Ғипсёіоп: еаѕе; 
1 
70% { +гап$Фогт: Егапз1а+еу(300рх); } 
90% { +гапѕҒогт: Егапз1а+еу(360рх); } 


} 
„.Ба11 { 

/* Стилизация */ 

апіта+іоп: Боипсе 35 сиб1с-Бе71ег(.1,.25,1,.25); 
} 


Используя графические инструменты, подобные Һір://сибіс-Бехіегсот (рис. 8.7), 
мы можем продолжить эксперименты и внести еще больше улучшений в нашу 
пружинящую анимацию. 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеѕ.іо/юоипсе 
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Рис. 8.7. Кубические кривые Безье печально известны сложностью в определении и понимании 
без соответствующей визуализации, особенно когда они играют роль функций расчета времени для 
переходов. К счастью, в Сети существуют визуальные инструменты, помогающие разобраться в этом 
нелегком вопросе, например ВНр://сиЫс-Бейег.сот (на рисунке) авторства вашей покорной слуги 





Благодарности 


сибіс-бегіег(.32,.14,.34,.93) Е 


ж тни 


Ргеуіем & сотраге 
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7 
ТАМЧЫ 


Тір: Аіда сіск оп апу Югагу сигуе апа зеюс: "Сору Си Абгезз" 10 001 а репттайгі 0 И мћісћ уси 


сап зћаге меһ сћегз 


В библиотеке анимации апітаѓе.сѕѕ Дэна Эдена (рап Едеп, Һ&р://аапейеп. 
те) используется функция расчета времени сибіс-Брегіег(. 215, 
.61,.355,1) и сиб1с-Бе71ег(.755,.05,.855,.06) в качестве противо- 
положной. Противоположная функция характеризуется более крутым 
графиком, что создает еще более реалистичный эффект. 


Эластичные переходы 


Предположим, что каждый раз, когда фокус переводится на текстовое поле, 
мы хотим показывать выноску с дополнительной информацией, например 
допустимыми значениями для ввода в этом поле. Разметка может выглядеть 
приблизительно так: 


НТМЕ 
<1ађе1» 


Үоиг иѕегпате: <іпри іа="иѕегпате" /> 
<ѕрап с1а55="са11ои{">Оп1у 1еффег$, питрегѕ, 
ипаегѕсогеѕ (_) апа һурһепѕ (-) а11омеа! </ѕрап> 


</1абе1 > 
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Уоиг изегпате: Уоицг изегпате: Уоиг иѕегпате: 
]саусгой Ісауегоц 1саусгой 

Уоиг изегпате: Уоицг изегпате: Уоцг изегпате: 
]сауегой | | ]сауегой | Іеауегоц 
тегами Ошу Честь, палета, иовегисогсь 


Ошщуецегз, пигабегз, ипдегзсогез 
{_) апа Һурһепз (-) аПомед! 


( апі Һурћеты (-) оте! 


Рис. 8.8. Как изначально выглядит наш переход 


А С88-код для переключения стиля отображе- СОВЕТ 
ния может выглядеть как в следующем фрагменте Если вы использовали для 


(я убрала все относящееся к стилизации и разметке): ©т0бражения выноски свой- 
ство һеірһ, а не трансфор- 


мацию, то заметите, что пере- 
ход от һеірһі: 9 (или любого 
другого значения) к һеіећһ: 

} аи+о не работает, так как 
.са110иї { аифо — это ключевое слово, 


а и оно не может быть выра- 
їгапѕіёіоп: .55 фгап$Фогй; р 


т жено в форме анимируемого 
їгапѕҒогт-огівіп: 1.4ет -.4ет; значения. В таких случаях 


} следует использовать тах- 
һеірһ с достаточно большим 
В текущем варианте реализации, когда пользователь значением высоты. 


переводит фокус на наше текстовое поле, запуска- 

ется переход длительностью 0,5 с, работающий, как 

показано на рис. 8.8. С ним все прекрасно уже сейчас, но он бы выглядел есте- 
ственнее и привлекательнее, если бы в конце выноска на мгновение немного 
раздувалась (то есть увеличивалась до 110% своего размера, а затем снова воз- 
вращалась к 100%). Этого можно добиться, преобразовав переход в анимацию 
и применив трюк, который мы выучили в предыдущем разделе: 


іпри:по+( : Ғосиѕ) + .са11оиї { 
їгапѕҒогт: ѕса1е(0); 


@кеу+Ғгатеѕ е1аѕ+іс-вгом { 
гот { ЕгапѕҒогт: ѕса1е(0); } 
70% { 
{гап$Фогт: ѕса1е(1.1); 
апіта+іоп-+ітіпе - ҒипсЕ1іоп: 
сибіс-бегіег(.1,.25,1,.25); /* Обратная к еазе */ 


} 


1при* : по*( : Ғосиѕ) + .са11оиї { +гап$Фогт: ѕса1е(0); } 
1при*:Фосиз + .са11ои+ { апітаїіоп: е1аѕііс-ргом .55; } 


.са11оиї { ігапѕҒогт-огівіп: 1.4ет -.4ет; } 
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Протестировав это решение, мы убедимся, что оно действительно работает. 
Результат вы можете видеть на рис. 8.9: сравните его с предыдущим вариантом 
перехода. Но, по сути, мы воспользовались анимацией там, где в действительно- 
сти нам требовался переход. Анимация — очень мощный инструмент, и в такой 
ситуации, как у нас, когда мы всего лишь хотим добавить переходу немного 
эластичности, это все равно что забивать гвозди микроскопом или браться за 
цепную пилу, чтобы отрезать кусочек хлеба. Можно ли добиться чего-то по- 
добного, используя только переход? 


Уоиг иѕегпате: Уоцг изегпате: 


1саусгоц 1сауегоц 


Уоиг изегпате: Үоцг иѕегпате: 


1саусгом 1саусгоц 


рии нее ан 
пиаре нина 


Олду чет, політ, штбетасогсз 
(аркі урса (.) абючиса! 


Уоиг иѕегпате: Үошг иѕегпате: 


1саусгоц ]саустом 


Үоџг изегпате: Уоцг иѕегпате: 


1саусгоц 1саустоц 


Ошу Ісмет», потег», одегьсогся Олду Іепетз, пштета, мофегкогся 
(_) ава ћурһет (-) аШомс@! { амі ћурі»ст (-) абомиед! 


Рис. 8.9. Наш пользовательский интерфейс выглядит реалистичнее и привлекательнее после 
того, как мы сделали переход немного эластичнее 


Решение опять кроется в настраиваемых функциях расчета времени сиб1с- 
регіег(). Пока мы обсуждали только такие кривые, контрольные точки которых 
принадлежали диапазону от 0 до 1. Как я уже говорила в предыдущем разделе, 





(70%, 110%) 


(50%, 100%) 


Прогресс 


Время 


Рис. 8.10. Доработанная 
функция расчета времени 

с вертикальными координа- 
тами за пределами диапазо- 
на 0-1 


нельзя выходить за пределы этого диапазона по го- 
ризонтали, хотя в будущем это может измениться, 
если человечество когда-либо изобретет машину 
времени. Однако по вертикали мы можем выходить 
за рамки диапазона 0-1, заставляя наш переход де- 
монстрировать менее 0% прогресса или более 100%. 
Понимаете, что это означает? Это означает, что при 
движении от трансформации $са1е(9) к трансфор- 
мации ѕса1е(1) мы можем заставить ее перешагнуть 
финальное значение, достигнув уровня ѕса1е(1.1) 
или даже больше, в зависимости от того, насколько 
крутой мы планируем сделать нашу функцию рас- 
чета времени. 


В нашем случае нужно добавить совсем немного 
эластичности: мы хотим, чтобы наша функция рас- 
чета времени добралась до 110% прогресса (что 
соответствует ѕса1е(1.1)), а затем выполнила об- 
ратный переход к 100%. Начнем с исходной функции 
расчета времени еаѕе (сибіс-бегіег(.25,.1,.25,1)) 
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и передвинем вторую контрольную точку наверх, примерно до уровня 
регіег(.25,.1,.3,1.5). Как видно на рис. 8.10, теперь переход достигает 100% 
приблизительно через 50% отведенного ему времени. Однако здесь он не оста- 
навливается; он продолжает движение вверх, преодолев конечное значение, пока 
не достигает 110% прогресса приблизительно через 70% времени, а оставшиеся 
30% времени занимает возвращение к конечному значению. В результате полу- 
чается переход, очень схожий с предыдущей анимацией, но для воплощения 
которого достаточно одной строки кода. Взгляните, как код выглядит теперь: 


1при* : по*( : Ғосиѕ) + .са11оиї { +гап$Фогт: $са1е(9); } 


.са11ои+ { 
{гап$Фогт-ог151п: 1.4ет -.4ет; 
ігапѕіёіоп: .55 сиріс-регіег(.25,.1,.3,1.5); 


Однако несмотря на то что, когда мы переводим фокус на текстовое поле, застав- 
ляя выноску появляться, наш переход выглядит в точности так, как и ожидалось, 
в обратной ситуации, когда текстовое поле теряет фокус, а выноска сжимается 
и исчезает, результат может разочаровывать (рис. 8.11). Что же здесь происхо- 
дит? Как бы странно этот эффект ни выглядел, ничего неожиданного здесь нет: 
когда мы переводим фокус с нашего поля ввода на другой элемент интерфейса, 
запускается переход, начальное значение которого равно ѕса1е(1), а конечное — 
ѕса1е(0). Следовательно, поскольку применяется та же самая функция расчета 
времени, переход все так же достигает 110% прогресса через 350 мс. Только на 
этот раз 110% прогресса соответствует не ѕса1е(1.1), а ѕса1е(-0.1)! 


Уоишг изегпате: Уоиг изегпате: Уоишг изегпате: 


]сауегой ]сауегоц Іеауегои 


Онду елата паат, шае тас сеа 


Опіу Іецегъ, пштЬсть, шујсгьсогсз май Буркин 


Опју Ісиегз, пигаБегз, ипаегѕсогеѕ 
{ арі ћурћепз (-) аПомей! 


(_) апа Һурһепз (-) омеа! 


Үоџг изегпате: Уоиг изегпате: Уоишг изегпате: 


]еауегоц Іеауегои (уе 
|? 
. =. 


Рис. 8.11. Что случилось?! 


Но не стоит опускать руки, ведь исправить эту проблему можно с помощью 
всего лишь одной дополнительной строки кода. Предположим, что для эффекта, 
когда выноска сжимается, нам требуется обычная функция расчета времени 
еаѕе. Для того чтобы добавить ее, нужно всего лишь переопределить текущую 
функцию расчета времени в правиле С55, определяющем закрытое состояние: 
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1при* : по*( : Ғосиѕ) + .са11оиї { 
{гап$Фогт: ѕса1е(0); 
їгапѕі+іоп-їіітіпе-Ғипсііоп: еаѕе; 


} 
.са11оиї { 

їгапѕҒогт-огіріп: 1.4ет -.4ет; 

{гап$110п: .55 сиріс-регіег(.25,.1,.3,1.5); 
} 


Попробуйте выполнить код еще раз, и вы увидите, что выноска закрывается 
точно так, как это происходило до добавления нашей доработанной функции 
сибіс-Бегіег(), аотображение выноски сопровождается приятным эластичным 
эффектом. 


Самые бдительные читатели наверняка заметили другую проблему: при закры- 
тии выноски создается впечатление, что это происходит слишком медленно. 
Почему так? Давайте поразмышляем. Когда выноска увеличивается, она до- 
стигает 100% конечного размера через 50% времени (то есть через 250 мс). Но 
когда она уменьшается, движение от 0% до 100% занимает все время, выделен- 
ное для перехода (500 мс), поэтому скорость оказывается в два раза меньше. 


Чтобы исправить этот недостаток, мы можем переопределить также и длитель- 
ность перехода, используя ёгапѕіїіоп-Яигаёіоп или же сокращение Єғапѕі+іоп, 
которое переопределяет вообще все. Во втором варианте нам не придется явно воз- 
вращать функцию расчета времени еаѕе, потому что это первоначальное значение: 


іпри:по+( : Ғосиѕ) + .са11оиї { 
{гап$Фогт: ѕса1е(0); 
гапѕіёіоп: .255; 


} 
.са11оиї { 

їгапѕҒогт-огіріп: 1.4ет -.4ет; 

{гап$110п: .55 сиріс-регіег(.25,.1,.3,1.5); 
} 


Хотя эластичность может быть приятным дополнением ко многим типам пере- 
ходов (некоторые из них я перечислила в разделе «Проблема» этого секрета), 
с некоторыми она выглядит просто ужасно. Типичная ситуация, когда вы не 
хотите использовать эластичные переходы, это работа с цветами. Несомненно, 
эластичные переходы на цветах могут смотреться довольно забавно (рис. 8.12), 
но в пользовательских интерфейсах использовать это чаще всего нежелательно. 


Для того чтобы предотвратить ненамеренное применение эластичных перехо- 
дов к цветам, попробуйте ограничивать переходы определенными свойствами, 
вместо того чтобы вообще не указывать никакие, как мы делали выше. Если 
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Рис. 8.12. Эластичный цветовой переход от г96(100%, 0%, 40%) к цвету агау (г96(50%, 50%, 
50%)) с функцией расчета времени сибіс-Бегіег(.25,.1,.2,3). Каждая координата ВСВ интерполиру- 
ется по отдельности, поэтому в результате в составе перехода оказываются странные цвета 
вроде гдБ(0%, 100%, 60%). Проверьте на ћҺїр://ріау.сѕѕѕесгеїѕ.іо/еІаѕііс-соіог 


в сокращении їгапѕіїіоп мы не указываем никакие 
свойства, то свойству ёгапѕі+іоп-рпорег+у присваи- 
вается значение по умолчанию: а11. Это означает, что 
ко всему, на что может распространяться переход, 
этот переход будет применен. Следовательно, если 
позднее к правилу, в котором описываются откры- 
вающиеся выноски, мы добавим изменение фона 
в свойстве Басквгоипа, то эластичный переход будет 
применен также и к установке фона. Финальная 
версия кода выглядит так: 


іприї :пої( : Ғосиѕ) + .са110оиї { 
{гап$Фогт: ѕса1е(0); 
1гапѕіфіоп: .255 ЁгапѕҒогт; 


} 


„.са11ои* { 

{гап$Фогт-ог151п: 1.4ет -.4ет; 

{гап$110п: .55 сиріс-регіег(.25,.1,.3,1.5) 
ёгапѕ огт; 


} 


ПОПРОБУЙТЕ САМИ! 


Вр://р!ау.с555есге($ 1о/е!аз#с 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Тгапѕійіопѕ: Һр://\3.ого/ТЕ/с55-гапѕііопѕ 
С55 Апітаїіопѕ: Һр://%3.огд/ТВ/с55-апітайопѕ 


СОВЕТ 


Продолжая тему ограниче- 
ния переходов конкретными 
свойствами, вы можете даже 
ставить в очередь переходы, 
определенные для разных 
свойств, используя свойство 
Тгапѕііоп-Яе1ау — вто- 
рое временное значение 

в сокращении +гап$11оп. 
Например, если переход 
охватывает оба атрибута, 
мтаЕв и һеівһ+, но вы хотите, 
чтобы сначала изменилась 
высота и только после этого 
ширина (эффект, ставший 
популярным благодаря мно- 
жеству сценариев для реа- 
лизации световых коробов), 
то можете использовать по- 
добное правило: Егап$11оп: 
.55 Пе1ёНе, .8$ .55 міа+һ; 
(то есть задержка перехода 
для атрибута міа+һ равна 
продолжительности перехода 
для атрибута һеівһ®). 
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ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые знания анимации С55, секрет «Эластичные переходы» 


Проблема 


Довольно часто возникает необходимость в анимации, которую трудно или 
даже вовсе невозможно создать с помощью переходов, определенных на С55- 
свойствах элементов. Например, это может быть мультфильм или сложный 
индикатор прогресса. Покадровая анимация, состоящая из отдельных изобра- 
жений, — идеальное решение для подобных случаев, но удивительно, насколько 
сложно реализовать ее гибким и удобным способом. 


Возможно, вы сейчас задаетесь вопросом, почему бы просто не прибегнуть 
к помощи анимированных изображений в формате СТЕ Разумеется, анимиро- 
ванные СІЕ-изображения прекрасно подходят во многих ситуациях, но у них 
есть несколько недостатков, которые в определенных сценариях делают их 
нежелательным решением: 


О они ограничены палитрой из 256 цветов, одной и той же для всех кадров; 





О они не поддерживают прозрачность альфа-канала, что может стать большой 
проблемой, если мы не знаем, что будет находиться под нашим анимирован- 
ным СТЕ-изображением. Например, так часто бывает, когда изображение 
представляет собой индикатор прогресса (рис. 8.13); 


О нет никакой возможности управлять из С55-кода определенными аспекта- 
ми, такими как продолжительность, количество повторений, приостановка 
анимации и т. д. Генерируя изображение в формате СІЕ вы пакуете в один 
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файл все данные, и изменить их можно, лишь от- 
редактировав изображение и создав новый файл. 
Это прекрасно для обеспечения переносимости, 
но не когда вы хотите поэкспериментировать. 


Давным-давно, в 2004 году, разработчики браузера 
Мо7Ша предприняли попытку справиться с пер- 
выми двумя проблемами, разрешив покадровую 
анимацию в файлах формата РМС, аналогично 
тому, как мы можем использовать и статичные, 
и анимированные СІЕ-файлы. Формат носил на- 
звание АРХС и предусматривал обратную совме- 
стимость с утилитами просмотра изображений, не 
поддерживающими РМС с анимацией: первый кадр 
кодировался точно так же, как в традиционных 
РМС-файлах, поэтому старые утилиты могли как 
минимум отобразить один этот кадр. Несмотря на 
многообещающее начало, формат АР№С так и не 
завоевал популярность, и по сей день поддержка 
этого формата браузерами и графическими редак- 
торами крайне ограниченна. 


Разработчики даже используют Јауа$Ѕсгірё для 
реализации гибкой покадровой анимации в бра- 
узере, анимируя с помощью сценариев свойство 
расквгоипа-роѕі+іоп спрайта. Более того, в Сети 
можно найти небольшие библиотеки, предназна- 
ченные для помощи в этом деле! Но существует 
ли простой и понятный способ создания подобной 
анимации средствами приятного и читабельного 


С5$5-кода? 


Решение 
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#706 
ііпеаг-дгадіепеС45дед, ##06, уе\1ом) 


Рис. 8.13. Полупрозрачный 
индикатор прогресса (на 
веб-сайте Һір://млм.даБЫеі. 
сот); такого результата 
невозможно добиться 

с помощью анимированных 
изображений в формате СЕ 


Получить более подробную 
информацию о формате АРМС 
вы можете в статье ћҺрѕ:// 
ги. мАКреФа.огд/мИК/АРМС. 


Предположим, что у нас есть спрайт в формате РМС, содержащий все кадры 


нашей анимации, как показано на рис. 8.14. 


Рис. 8.14. Восемь кадров нашего индикатора прогресса (размер спрайта — 800х100) 
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Также у нас есть элемент, который будет содержать 
этот индикатор (не забудьте для обеспечения доступ- 
ности добавить описательный текст!), и мы опреде- 
лили для него размеры, совпадающие с размерами 
одного кадра: 


Е Рис. 8.15. Первый кадр 

<аіу с1а55="1оайег" >| оайіпе...</аім> нашего индикатора загрузки 
отображается, но пока 

.1оайег { анимация отсутствует 


міаһ: 100рх; һеівһ+: 100рх; 
баскргоипа: иг1(іте/ 1оадег.рпе) ө е; 


/* Скрыть текст */ 
Техі-іпаепЕ: 200%; 
мһі+е-ѕрасе: помгар; 
омегҒ1ом: һіааеп; 


} 


Пока результат выглядит как на рис. 8.15: первый кадр отображается, но никакой 
анимации не видно. Однако если мы воспроизведем код с разными значениями 
расквгоипа-роѕі+іоп, то заметим, что -100рх 9 дает нам второй кадр, -20ерх ё — 
третий кадр и т. д. Первой мыслью в связи с этим может быть такой вариант 
анимации: 


@кКеу+гатеѕ 1оайег { 
Фо { Баскегоипа-роѕіїіоп: -800рх 0; } 
} 
.1оайег { 
міаёһ: 100рх; һеівһ+: 100рх; 
баскргоипа: иг1(іте/ 1оадег.рпе) ө е; 
апітаёіоп: 1оадег 15 іпҒіпі+е 1іпеаг; 


/* Скрыть текст */ 
Техі-іпаепЕ: 200%; 
мһі+е-ѕрасе: помгар; 
омегҒ1ом: һіааеп; 


Однако, как вы можете видеть на следующих снимках экрана (сделанных с ин- 
тервалом 167 мс), это решение не работает (рис. 8.16). 


Вам может казаться, что мы зашли в тупик, но в действительности мы очень 
близки к решению. Секрет здесь заключается в использовании функции расчета 
времени ѕ+ерѕ() вместо функции, основанной на кривых Безье. 
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«Какой-какой функции расчета времени?!» — спросите вы. Как мы узнали 
в предыдущем разделе, все функции расчета времени на основе кривых Безье 
интерполируют содержимое ключевых кадров, для того чтобы обеспечить 
плавный переход одного изображения в другое. Это великолепно; чаще всего 
плавное перетекание и есть та причина, по которой мы прибегаем к перехо- 
дам и анимации С55. Однако в нашей ситуации плавность разрушает нашу 
анимацию спрайта. 


Рис. 8.16. Наша первая попытка реализовать покадровую анимацию провалилась, так как 
в действительности нам не требуются плавные переходы между ключевыми кадрами 


В отличие от функций расчета времени Безье, функ- 
ция ѕёерѕ() делит всю анимацию на кадры по коли- 
честву указанных вами шагов и резко перескакива- 
ет с одного на другой безо всякой интерполяции. 
Обычно такая резкая смена картинки нежелательна, 
поэтому о ${ерз() вспоминают крайне редко. В мире 
функций расчета времени С55 функции на основе 
кривых Безье — это популярные ребята, которых 
приглашают на все вечеринки, а ѕ+ерѕ(), к сожа- 
лению, — гадкий утенок, с которым никто не хочет 
даже пообедать. Но в нашей задаче требуется именно Рис. 8.17. Сравнение 
такое поведение. Как только мы переформулируем Функций расчета времени 
определение анимации показанным далее способом, ѕ*ерѕ(8), іпеаг и функции по 
индикатор загрузки сразу же начнет работать так, У"07ЧаНИЮ вазе 

как и планировалось с самого начала: 


Прогресс 


Время 


апіта+іоп: 1Іоайег 15 іпҒіпі+е ѕ+ерѕ(8); 


Помните, что ѕёерѕ() также принимает необязательный второй параметр, ѕ+аге 
или епа (значение по умолчанию), определяющий, когда в каждом интервале 
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происходит переключение (поведение по умолчанию для варианта епа показано 
на рис. 8.17), но необходимость в нем возникает крайне редко. Если вам нужен 
только один шаг, то можно воспользоваться одним из сокращений — з%ер-заг& 
или зфер-епа, которые эквивалентны ѕ+ерѕ(1, ѕёагі) и ѕ+ерѕ(1, епа) соответ- 
ственно. 


ПОПРОБУЙТЕ САМИ! 


ВЕр://р!ау.с555есге10/ате-Бу-йате 


Благодарю Ѕітигаі (Һ&р://ѕітигаі.сот) за публикацию описания 
этой полезной техники в статье $рг\е ѕһееё апитаНоп мВ 
Ѕёерѕ() (НЕр://зитига!.сот/Ыод/2012/12/03/5ер-апитаНоп). 


Благодарности 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Апітаїіопѕ: НЁр://м/3.огд/ТВ/с$5-апитайоп$ 


44 Мерцание 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые знания об анимации С55, секрет «Покадровая анимация» 


Проблема 


Помните старый тег <‹ь1іпк›? Разумеется, помните. Он превратился в куль- 
турный символ нашей индустрии, напоминающий нам о неловком, непри- 
тязательном начале нашей дисциплины, а также в семейную шутку корифеев 
веб-дизайна. Он презираем всюду и всеми за нарушение правила о разделении 
структуры и стиля, но в первую очередь за чрезмерное использование в конце 
девяностых, из-за чего работа в Сети в то время была сущим кошмаром. Даже 
его создатель Лу Монтулли признался: «[Я считаю] мерцающий тег худшим, 
что я когда-либо сделал для Интернета». 


Однако теперь, когда раны, нанесенные тегом <61іпк>, затянулись, мы иногда 
ловим себя на мысли о добавлении в дизайн мерцающей анимации. Поначалу это 
кажется чем-то странным, словно мы обнаруживаем в себе жуткие наклонности, 
о которых до этого не подозревали. Но кризис самопознания проходит, когда 
мы осознаем, что в некоторых редких сценариях мерцание может улучшить впе- 
чатление пользователя от использования вашего дизайна, а не ухудшить его. 


Распространенный прием в дизайне пользовательских интерфейсов — добав- 
ление мерцания (но не более трех вспышек!) для указания, что определенное 
изменение было применено к интерфейсу, или же для подсветки цели текущей 
ссылки (элемента, чей идентификатор совпадает с указанным в адресе после 
решетки #). При таком ограниченном использовании мерцание может быть 
очень эффективным инструментом привлечения внимания пользователя 
к определенной области экрана, а благодаря малому количеству итераций мы 
избегаем побочных эффектов, которые порождал тег ‹61іпк>. Еще один трюк, 
позволяющий использовать мерцание во благо (для управления вниманием 
пользователя) и при этом не наносить ущерб (не отвлекать, не раздражать и не 
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вызывать припадков), заключается в том, чтобы «сглаживать» вспышки (то есть 
вместо простого переключения между состояниями «включено» и «выключено» 
мы добавляем плавный переход от одного к другому). 


Но как же реализовать все это? Единственная подходящая замена тегу <Ь1іпк> 
в С55, свойство фех{-десога оп: 614пк, слишком ограниченно и не позволяет 
воплощать все задумки, но даже если бы оно обладало достаточной мощью, все 
равно поддержка браузерами у него находится на очень низком уровне. Так 
можем ли мы использовать С55 или наша единственная надежда — Ј5? 


Решение 


В действительности реализовать подобное мерцание с помощью анимации С$$ 
можно несколькими способами: анимировать весь элемент (свойство орасі+у), 
анимировать цвет текста (свойство со1ог), анимировать его рамку (свойство богаег- 
со1ог) и т. д. Далее в этом разделе мы будем предполагать, что в нашем решении 
должен мерцать только текст, так как это самый распространенный сценарий ис- 
пользования. Для других составляющих элемента решение будет аналогичным. 


Добиться плавного мерцания довольно просто. Наша первая попытка могла 
бы выглядеть так: 
@кеу+Ғгамеѕ 611пК-зтоофИ { +о { со1ог: Егапзрагеп* } } 


„01811188 { ап1та%1оп: 15 Б1іпк-ѕтоо&һ 3; } 


Это почти сработало. Наш текст плавно теряет цвет, уходя в полную прозрач- 
ность, но затем внезапно снова полностью восстанавливает исходный цвет. 
Иллюстрация изменения цвета текста с течением времени наглядно показывает, 
почему так происходит (рис. 8.18): 


Рис. 8.18. Изменение цвета текста на протяжении 3 с (три итерации) 


В действительности иногда именно такой эффект нам и требуется. Если в вашем 
случае это так, то задача решена! Однако если мы хотим, чтобы мерцание было 
плавным и при переходе к прозрачности, и при восстановлении цвета, нам нужно 
еще немного потрудиться. Один из способов добиться этого — поменять ключевые 
кадры, для того чтобы переключение происходило в середине каждой итерации: 


@кеу+Ғгатмеѕ Ь1іпк-ѕтоо+һ { 50% { со1ог: {гапзрагеп* } } 


.һірһ1ірһё { 
апіта+іоп: 15 611пК-зтоо ЕВ 3; 
} 
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Кажется, мы достигли желаемого результата. Однако даже если это не заметно 
на данной конкретной анимации (потому что на переходах цвета/прозрачности 
различия между функциями расчета времени не так видны), важно помнить, что 
анимация ускоряется как при пропадании, так и при наборе цвета, что в опре- 
деленных сценариях (например, когда мы создаем пульсирующую анимацию) 
выглядит неестественно. Для того случая у нас в рукаве припасен еще один 
козырь: ап1та1оп-91гес1оп. 


Единственное предназначение апітаёіоп-дігесііоп — менять направление 
анимации либо во всех итерациях (геуегзе), либо в каждой четной итерации 
(а1{егпате), либо в каждой нечетной итерации (а1+егпаќе-геуегѕе). Лучше всего 
здесь то, что при этом функция расчета времени также меняется на обратную, 
создавая гораздо более реалистичную анимацию. Попробуем применить это 
к нашему мерцающему элементу: 


@кеу+Ғгамеѕ 611пК-зтоо{И { Фо { со1ог: Егапзрагеп* } } 


„61511181 { 
ап1та1оп: .55 Б1іпк-ѕтооЁһ 6 а1{егпа*е; 
$ 


Обратите внимание, что нам пришлось удвоить количество итераций (а не их 
продолжительность, как в предыдущем способе), поскольку теперь каждая 
пара из проявления и исчезновения цвета состоит из двух итераций. По той 
же причине мы вполовину уменьшили апітаіоп-аига+іоп. 


Е Исин ИЕ 
Е. _ СОСЕ Е 
ПО Оо Ш 
ае ИИ 


Рис. 8.19. Все четыре значения апітайоп-аігесіоп и как под их влиянием на протяжении трех 
итераций происходит процесс перехода цвета от Ыаск до їгапѕрагепі 












Если мы добивались плавной мерцающей анимации, то дело сделано. Но что, 
если нам требуется классическое решение? Как быть? Первая попытка может 
выглядеть примерно так: 


@КеуЕгатез 611пК { Ёо { со1ог: {гапзрагеп* } } 


„61201128 { 
апіта+іоп: 15 Б1іпк 3 ѕёерѕ(1); 


} 


314 Глава 8 • Переходы и анимация 


Прогресс 


РЕШЕНИИ 
Время 


Рис. 8.20. Что 

в действительности делает 
функция расчета времени 
ѕер5(1) с нашей анимацией 


Однако попытка выполнить этот код ведет к пол- 
нейшему провалу: абсолютно ничего не происходит. 
Причина в том, что ѕёерѕ(1) по сути — это эквива- 
лент ѕ+ерѕ (1, епа), что означает, что переход между 
текущим цветом и цветом {гапзрагеп{ происходит 
за один шаг, а значение переключается в конце 
(рис. 8.20). Следовательно, мы видим начальное 
значение на протяжении всей анимации, за ис- 
ключением бесконечно короткого промежутка 
в самом конце. Если мы поменяем функцию расчета 
времени на ѕ+ерѕ(1, ѕёаг+), то произойдет ровно 
противоположное: переключаться цвет будет в на- 
чале, поэтому мы будем видеть только прозрачный 
текст безо всякой анимации или мерцания. 


На следующем шаге логично испробовать ѕ&ерѕ(2) в обоих вариантах (с клю- 
чевыми словами ѕёагё и епа). Теперь мы видим какое-то мерцание, но оно про- 
исходит между полупрозрачным и прозрачным текстом или полупрозрачным 
текстом и текстом обычного цвета — соответственно по той же причине. К со- 
жалению, поскольку невозможно настроить ѕ+ерѕ() так, чтобы переключение 
происходило в середине — только в начале или в конце, — единственным ре- 
шением здесь будет скорректировать ключевые кадры анимации, переместив 
точку переключения на 50%, как мы уже делали раньше: 


@Кеу{гатез$ 611пК { 50% { со1ог: Егапзрагеп* } } 


„61201128 { 


апіта+іоп: 15 Б11пК 3 ѕёерѕ(1); /* или ѕёер-епа */ 


} 


Наконец-то все заработало! Кто бы мог подумать, что классическое прерывистое 
мерцание будет реализовать сложнее, чем современное плавное? С$$ никогда 


не перестает удивлять... 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/Ыіпк 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 


С55 Апітаїіопѕ: Һр://%3.огд/ТВ/с55-апітайопѕ 
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ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые знания анимации С55, секрет «Покадровая анимация», секрет 
«Мерцание» 


Проблема 


Иногда перед нами встает задача создать эффект текста, появляющегося на 
экране символ за символом, словно кто-то его вводит. Этот прием в сочетании 
с моноширинными шрифтами особенно часто используется на технических 
веб-сайтах для имитации командной строки терминала. При правильном ис- 
пользовании он способен прекрасно вписаться и значительно улучшить общий 
дизайн страницы. 


Обычно для реализации такого эффекта разработчикам приходится прибегать 
к помощи длинного, грязного и сложного ]5-кода. И несмотря на то что это 
всего лишь представление, использование С$$ для подобного эффекта кажется 
недостижимой мечтой. Или все же это возможно? 


Решение 


Основная идея заключается в том, чтобы анимировать ширину элемента, содер- 
жащего наш текст, с нуля и до полного значения, увеличивая размер видимой 
области на один символ за раз. Вероятно, вы уже догадались, какое ограниче- 
ние накладывает данный подход: для многострочного текста он не работает. 
К счастью, чаще всего подобная стилизация требуется для однострочного текста, 
такого как заголовки. 
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Рис. 8.21. Мы использовали вариацию такого анимационного эффекта в СЕВМ для создания веб- 
страницы, имитирующей первый браузер, работающий в строковом режиме (ћїр://1іпе-тоде.сегп.сћ) 


Теоретически мы могли бы 
использовать это решение 
и с многострочным текстом, 
но для этого потребовалось 
бы обернуть каждую стро- 
ку в собственный элемент 
и обеспечить необходимую 
задержку старта анимации 
(то есть решение в итоге 
получится хуже изначальной 
проблемы). 


С55 1$ амеѕоте! 


Рис. 8.22. Наша отправная 
точка 


Еще одна вещь, о которой не следует забывать, — 
каждая анимация по мере увеличения длительности 
порождает все больший снижающий эффект: корот- 
кая анимация делает интерфейс более стильными в 
некоторых случаях даже способна повысить удобство 
использования. Но чем длиннее анимация, тем скорее 
она начинает раздражать пользователя. Следователь- 
но, даже если эту технику можно было бы применить 
к длинному многострочному тексту, в большинстве 
случаев это было бы очень плохой идеей. 


Приступим к кодированию! Предположим, что мы 
хотим применить этот эффект к заголовку верхнего 
уровня (<һ1>), для которого мы уже определили 
стиль, включающий моноширинный шрифт, и ко- 
торый выглядит так: 


НТМЕ 
<11>С55 15 амеѕоте! < /һ1> 
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Мы можем с легкостью добавить анимацию, меня- с$$ 
ющую ширину нашего заголовка от 0 до конечного 5 
значения, как показано далее: 15 
| амезоте! 
@кеу+Ғгамеѕ ёуріп= { 
Ғгот { міа+һ: ө } С$$ 1$ 
} 
амезоте! 
№1 { 
міаєһ: 7.7ет; /* Ширина текста */ С$$ 15 амеѕоте! 
апіта+іоп: ёуріпе 85; 
} 


Рис. 8.23. Наша первая 


Все правильно, ведь так? Однако, как вы видите Попытка создать анимацию, 
имитирующую ввод текста, 


на рис. 8.23, у этого безобразия нет ничего общего СЕ авои тез ста оЕЕРШЕНАО На 
с эффектом, которого мы хотели добиться. оо 


Наверное, вы уже догадались, в чем проблема. Во- 

первых, мы забыли применить ий1{е- расе: помгар; 

для предотвращения переноса текста на новую стро- 

ку, поэтому по мере увеличения ширины элемента С: 

количество строк меняется. Во-вторых, мы забыли 

применить оуег+10и: һіддеп;, поэтому обрезания с55 15 ам 

не происходит. Исправив эти недочеты, мы начи- 

наем видеть реальные проблемы нашей анимации С55 15 амеѕог 
(рис. 8.24), а именно: 


О очевидно, что анимация получается плавной, Рис. 8.24. Наша вторая 


вместо того чтобы отображать текст символ за Попытка ближе к желаемой 
символом; цели, но это все еще не 


окончательное решение 
О менее очевидная проблема заключается в том, 
что до сих пор мы указывали ширину в единицах 
измерения еп, что, конечно, лучше, чем делать это в пикселах, но тоже не 
идеально. Откуда взялось значение 7,7? Как его вычислить? 


Первую проблему можно решить с помощью функции расчета времени ѕ&ерѕ(), 
как мы делали в секретах «Покадровая анимация» и «Мерцание». К сожале- 
нию, требуемое количество шагов равно количеству символов в нашей строке, 
а значит, такой код будет сложно поддерживать, а в случае динамического 
текста — попросту невозможно создать. Однако, как мы увидим чуть далее, 
вычисление этого значения можно автоматизировать, используя крошечный 
фрагмент кода Јауаёсгірї. 


Обойти вторую проблему нам помогут единицы измерения сн. сһ — это одна 
из новых единиц измерения, которая была добавлена в спецификации С$$ 
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Уаше$ ара Опи$ Геуе| 3 (Нр://м3З.ога/ТВ/с$$3-маиез) 


С5 и представляет ширину глифа 0. Это одна из наи- 
А менее известных новых единиц измерения, так как 
с55 15 а в большинстве случаев нас мало волнует возмож- 


ность определять размеры элементов относительно 
С55 15 амеѕ$о ширины глифа 0. Однако моноширинные шриф- 
ты — особый случай. В моноширинных шрифтах 
Рис. 8.25. Теперь текст ширина глифа 0 совпадает с шириной любого дру- 
отображается символ за гого глифа. Следовательно, для того чтобы задать 
символон:о:чеготоеще ширину в единицах измерения сн, нужно указать 
о: количество символов. В нашем примере их 15. Со- 
берем все вместе: 


@Кеу+гатеѕ +уріпе { 
Ғгот { міа+һ: ө; } 


} 
№1 { 
міаёһ: 15сһ; /* Ширина текста */ 
омегҒ1ом: һіааеп; 
мһіёе-ѕрасе: помгар; 
апітаіоп: фур1п& 65 $%ер$(15); 
} 


Как подтверждают кадры, показанные на рис. 8.25, теперь наконец-то мы полу- 
чили желаемый результат: наш текст отображается символ за символом. Однако 
он все еще не выглядит достаточно реалистичным. Догадаетесь, чего не хватает? 


Последняя деталь, которая сделала бы наше решение намного реалистичнее, — 
это мигающий курсор. Мы уже научились создавать мерцающую анимацию 
в секрете «Мерцание». В данном случае курсор можно добавить посредством 
псевдоэлемента, используя свойство орасі+у для реализации мерцания. С дру- 
гой стороны, мы могли бы сэкономить псевдоэлемент, которых у нас и так не 
очень много, на случай, если он понадобится для другого эффекта, и сделать 
мигающий курсор из правой рамки: 


@Кеу+гатеѕ +уріпе { 
гот { міаєһ: ө } 
} 


@кеу+Ғгамеѕ саге { 
50% { Богаег-со1ог: гапѕрагепё; } 


1 


№1 { 
міаёһ: 15сһ; /* Ширина текста */ 
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омегҒ1ом: һіааеп; 
мһі+е-ѕрасе: помгар; С5 
рогдӢег-гірһі: .05ет $0114; 


апіта+іоп: Ёуріпв 65 $%ер$(15), С55 1$ а 
сагеф 15 $%ер$(1) іпҒіпі+е; 


С55 15 амеѕо 


Обратите внимание, что, в отличие от анимаци- 
онного эффекта для отображения текста, курсор 
должен мерцать бесконечно (даже после того, как 
мы показали весь текст), отсюда и ключевое слово 
іпғіпіче. Помимо этого, мы не указываем цвет 
рамки, так как он должен определяться автома- 
тически и совпадать с цветом текста. Несколько 
кадров из результирующей анимации показаны 
на рис. 8.26. 


Рис. 8.26. Теперь нашу 
анимацию дополняет 
реалистичный мигающий 
курсор 


Наша анимация работает просто великолепно, но проблему сопровождения 
этого кода мы пока не решили: для каждого заголовка необходимо определять 
собственный СТИЛЬ, зависящий от количества символов, и обновлять значения 
каждый раз, когда мы меняем что-то в содержимом. Это как раз та задача, с ко- 
торой превосходно способен справиться Ј$: 


35 


$$('11').+РогЕасй (Фипс1оп(В1) { 
уаг 1еп = 11. ехЕСопфеп*.1епёЕИ, $ = ћ1.5ѕ+у1е; 


$.мтаЕИ = 1еп + 'сһ'; 
5 .апіта+іоптТітіпеЕипсёіоп = "ѕ&ерѕ("+1еп+") , $ерз(1)"; 


}); 


Эти несколько строк кода Ј5 позволяют нам успешно догнать и схватить обоих 
зайцев: наша анимация не только реалистично выглядит, но и проста в сопро- 
вождении! 


Все это прекрасно, но что произойдет, если окажется, что браузер не поддер- 
живает анимацию С85? По сути, такой браузер пропустит весь код, как-либо 
связанный с анимацией, и прочитает только следующее: 


№1 { 
міаёһ: 15сһ; /* Ширина текста */ 
омегғ1ом: һіааеп; 
мһі+е-ѕрасе: помгар; 
рогдӢег-гірһі: .05ет $0114; 
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В зависимости от того, поддерживает ли такой браузер единицы измерения 
сп, пользователь увидит один из запасных вариантов, показанных на рис. 8.27. 
Для того чтобы избежать второго случая, можно добавить резервное решение 
сединицами измерения ем. Если же вы не хотите видеть немерцающий курсор 
в резервном решении, то измените анимацию курсора, добавив в ключевые ка- 
дры рамку, для того чтобы в случае отсутствия анимации отображалась только 
невидимая прозрачная рамка, вот так: 


С55 1$ амезоте! 
С55 1$ амезоте! 


Рис. 8.27. Возможные варианты отображения в браузерах, не поддерживающих анимацию С55 
(наверху: с поддержкой единиц измерения сһ; внизу: без поддержки единиц измерения сп) 


@кеу+гамеѕ саге { 
50% { Богаег-со1ог: сиггепЕСо1ог; } 


} 
№1 { 
Е И 
Богаег-г128*: .05ет $0114 +гапзрагеп*; 
апітаіоп: фур1пё 65 з%ер$(15), 
саге 15 ѕ+ерѕ(1) 1п1п1е; 
} 


Это достаточно хорошее резервное решение: в старых браузерах анимации 
нет, но ничего не ломается и текст остается доступным, в то же время не теряя 
в стилизации. 


ПОПРОБУЙТЕ САМИ! 
Һр://рІау.сѕѕѕесгеѕ.іо/уріпо 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Апітаїіопѕ: НЫр://м/3.огд/ТВ/с$5-апита{оп$ 
С55 Маіиеѕ & Опіёѕ: Һр://%3.огд/ТЕ/с55-үаіиеѕ 
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ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Базовые знания анимации С55, свойство апітатіоп-аігесёіоп (упоминалось 
в секрете «Мерцание») 


Проблема 


Анимация не всегда запускается сразу же по завершении загрузки страницы. 
Тораздо чаще мы хотим использовать анимацию в ответ на действия пользо- 
вателя, такие как наведение мыши на элемент или удержание кнопки мыши, 
когда ее указатель находится на элементе (:асіме). В подобной ситуации у нас 
не всегда есть контроль над фактическим числом итераций, так как действия 
пользователя могут приводить к тому, что анимация прервется до того, как бу- 
дут воспроизведены все запланированные итерации. Например, пользователь 
может запустить симпатичную анимацию :поуег и убрать указатель мыши 
с элемента до того, как анимация завершится. Что, по вашему мнению, должно 
происходить далее в этом случае? 


Если вы ответили что-то вроде «анимация должна Это еще одна причина, для 
застыть в текущем состоянии» или «она должна того чтобы по возможности 
плавно вернуться в изначальное состояние», то вас ПОЛЬЗОВаться переходами. 
ждет неприятный сюрприз. По умолчанию анима- Вместо ЕО 
перепрыгивать к изначаль- 
ция прервется и резко перескочит в изначальное ому состоянию, переходы 
состояние. Иногда, если речь идет о малозаметной воспроизводятся в обратном 
анимации, такое поведение может быть допустимым. направлении, обеспечивая 
Нов большинстве случаев это значительно ухудшает плавное возвращение в ис- 
впечатление пользователей от работы с интерфей- ходное состояние. 
сом. Можно ли это как-нибудь изменить? 
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2 7 ЖЫ е. - 
Гм ]чилам Снел, 
л Вагтіѕн Кову/Ќли5 рЕУЕГОРЕК 
УТТН А РЕМСНАМТ РОК ТҰЕЕР, 
ЕТМЕ СОЕРЕЕ, АЮ НОМЕВКЕУТМС. 
\УУЪеп пос огкіод бог сђепія, Г Һеір ограпие 


„Тао оссаяіопаћу реак аќ 
іосегпакіопаї сопќегепсез оп (е іпсегзесіоо оѓ 
ргобтапипіод арі гооќісз. Іл (ће раз, Гус 
уогкей аз а буцели Оеуеюрег аќ Т 

З у, 1 ая фе 
Ісай Оеуеорсг а 


2 д а. 
Гм Јоилм Снел, 
л Ввгтлзн Кову/Кли5 РЕУЕГОРЕК 
УТТН А РЕМСНАМТ РОК ТУЕЕО, РІМЕ 
| СОРРЕЕ, АМЮ НОМЕВВЕУТНС. 


|. Меп пос око ќог сепз, І Ве[р ограрізе { 


4 (з, І аізо оссазіопаШћу 
іп‹еграйопа! сопќегепсез ор (ће іосегэссіоп ой 
ргортапиийзя апі гоЬоќісз. Іа (ће раз, Гуе 

| жогкей аз а букете Оеуеюрег а Тће Опі 


ОҒВагћ бог буе усага. Моге гесепЦу, 1 ғаз фе 
| “Теза Реуеіорет а Амо! 





Рис. 8.28. Я поставила себе целью найти решение этой проблемы, когда работала над простым 
одностраничным веб-сайтом в подарок на день рождения моему другу Джулиану (Зийап, ВЕр:// 
йапсвеа!.со.иК). Обратите внимание на круглое изображение справа на снимке экрана. В дей- 
ствительности я использовала файл в альбомной ориентации. Окружность отрезает правую часть 
изображения, но когда пользователь наводит на него указатель мыши, изображение начинает 
медленно прокручиваться влево, и пользователь видит скрытую часть. По умолчанию, если поль- 
зователь убирает указатель мыши с изображения, оно резко возвращается в исходную позицию, 
из-за чего создается впечатление, что с дизайном что-то не так. Поскольку это крошечный веб- 
сайт, а изображение — его центральный элемент, я решила, что не могу оставить все как есть 


Предположим, что у нас есть очень длинная фотография в альбомной ориен- 
тации, такая, как показана на рис. 8.29, но размер доступного пространства, на 
котором мы можем ее отображать, ограничивается 150 х 150 пикселов. Один 
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Рис. 8.29. Файл пахоѕ-дгеесе.јрд, который мы будем использовать в примерах в этом секрете, 
целиком (фотография сделана Крисом Хатчисоном) 


из способов решить проблему отображения — добавить анимацию: показывать 
по умолчанию левый край и прокручивать изображение, открывая оставшуюся 
часть, когда пользователь взаимодействует с ним (например, наводит на него 
указатель мыши). Мы будем использовать для изображения один элемент, 
аанимировать будем позицию его фона: 


.рапогатіс { 
міаёһ: 150рх; һеірһі: 150рх; 
Баскёгоипа: иг1("іте/пахоѕ-вгеесе.јре"); 
Баскёгоипа-$12е: аи+о 100%; 


Сейчас результат выглядит, как показано на рис. 8.29, и никакой анимации или 
интерактивности здесь нет. Но если мы поэкспериментируем, то заметим, что 
при изменении значения баскегоџпа-роѕітіоп вручную с исходных 0 0 до 190% 9 
будет происходить прокрутка всего изображения. Мы только что нашли наши 
ключевые кадры! 


@кеу+Ғгатеѕ рапогат1с { 
Фо { Баскегоипа-роѕі+іоп: 100% 0; } 


} 


.рапогатіс { 
міаһ: 150рх; һеірһі: 150рх; 
браскегоипа: иг1("іте/пахоѕ-вгеесе.јре"); 
раскегоипа-ѕіғе: аиїо 100%; 
апітаіоп: рапогатіс 105 1іпеаг іпҒіпіёе а1+егпаї+е; 


Это решение прекрасно работает. Чем-то напоминает панорамный вид, как 
будто вы находитесь прямо там и смотрите направо и налево. Однако анимация 
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запускается при загрузке страницы, что может 
слишком сильно отвлекать внимание пользователя 
в контексте, например, веб-сайта с советами путе- 
шественнику, когда он пытается сфокусироваться 
и прочитать описание Наксоса, вместо того чтобы 
разглядывать прелестную панорамную фотогра- 
фию. Гораздо лучше было бы, если бы анимация 
стартовала, только когда пользователь наводит 
на изображение указатель мыши. Нашей первой 
мыслью было бы такое изменение кода: 





Рис. 8.30. Наше изображение 
обрезано 


„.рапогат1с { 
міаёһ: 150рх; һеірһі: 150рх; 
баскегоипа: иг1("іте/пахоѕ-вгеесе.јрв"); 
Баскёгоипа-$12е: аи+о 1007; 


} 


.рапогатіс :һоуег, „рапогат1с:+оси$ { 
апітаіоп: рапогам1с 105 1іпеаг 1п1п1%е а1+егпа+е; 


} 


Это действительно работает, как и ожидается, когда мы наводим указатель 
мыши на изображение: оно начинает медленно прокручиваться, и мы полу- 
чаем возможность увидеть его правую часть. Однако когда мы убираем с него 
указатель мыши, оно резко возвращается к изначальному состоянию, когда на 
экране виден только его левый край (рис. 8.31). Мы натолкнулись на проблему, 
которой и посвящен этот секрет! 





Рис. 8.31. При наведении указателя мыши фотография начинает плавно двигаться, но когда мы 
убираем указатель, это приводит к резкой смене картинки, создавая впечатление, что элемент 
сломан 


Для того чтобы исправить это, необходимо посмотреть на желаемый результат 
под другим углом. Мы не должны ставить себе целью запускать анимацию по 
событию :воуег, ведь при этом предыдущее положение не запоминается. Нам 
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нужно приостанавливать анимацию, когда событие :по\уег не происходит. 
К счастью, существует свойство, назначение которого как раз и состоит в при- 
остановке существующей анимации: ап1та&1оп-р1ау-за*е! 


Следовательно, мы применим нашу исходную анимацию к .рапогатіс, но с са- 
мого начала поставим ее на паузу до тех пор, пока не сработает событие : по\ег. 
Поскольку теперь суть решения не в том, чтобы запускать и отменять анима- 
цию, а всего лишь в том, чтобы приостанавливать и продолжать существующую 
анимацию, резкой перемотки назад не происходит. Финальная версия кода 
представлена далее, а результат вы можете видеть на рис. 8.32: 





Рис. 8.32. Теперь, когда мы убираем указатель мыши с картинки, анимация просто 
приостанавливается — больше никаких резких прыжков 


@Кеу+гатеѕ рапогатіс { 
Фо { Басквгоипа-роѕіїіоп: 100% 0; } 
|. 


.рапогатіс { 
міаёһ: 150рх; һеірһі: 150рх; 
браскегоипа: иг1("іте/пахоѕ-вгеесе.јрв"); 
браскегоипӣ-ѕ5іғе: аиїо 100%; 
апітаіоп: рапогам1с 105 1іпеаг іпҒіпіёе а1+егпа+е; 
апіта+іоп-р1ау-ѕїа+е: раиѕеа; 


} 


„.рапогат1с:Помег, .рапогатіс:Ғосиѕ { 
ап1та1оп-р1ау-$%афе: гиппіпе; 
І 


ПОПРОБУЙТЕ САМИ! 


Һр://рІау.сѕѕѕесгеїѕ.іо/ѕаќе-апітаёіопѕ 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 АпитаНоп$: Һ&р://\3.ог9/Т6/с55-апітайопѕ 


7 Анимация вдоль окружности 


ПРЕДВАРИТЕЛЬНЫЕ ТРЕБОВАНИЯ 


Анимация С55, трансформации С55, секрет «Параллелограммы», секрет 
«Изображения в форме ромба», секрет «Мерцание» 


Проблема 


Несколько лет назад, когда анимация С$$ была нам еще в новинку, Крис Койер 
(№р://сѕѕ-ігіскѕ.сот) спросил меня, могу ли я придумать способ анимировать 
с помощью С$5$ движение элемента по кругу. В то время это было всего лишь 
занимательным упражнением на знание С55, но позднее мне довелось натолк- 
нуться на множество реальных сценариев использования. Например, в Сооб]е+ 
вы видите такую анимацию, когда в круг, в котором уже есть более 11 членов, 
добавляется новый пользователь: существующие аватары раздвигаются, осво- 
бождая место на окружности для нового изображения. 





Рис. 8.33. В Соодіе+ 
анимация вдоль окружности 
используется для указания, 
что в «круг» был добавлен 
новый пользователь 


Другой, очень забавный пример можно найти на 
популярном российском веб-сайте һабгаһаБг.ги 
(рис. 8.34). В соответствии с лучшими практиками 
оформления страниц для ошибки 404 эта страница 
содержит навигационное меню, позволяющее перей- 
ти к некоторым основным разделам веб-сайта. 


Каждый элемент меню представлен в виде планеты, 
вращающейся по окружности, а текст наверху гла- 
сит: «Слетайте на другие наши планеты». Разумеет- 
ся, в данном случае логично перемещать планеты по 
окружности и не вращать их дополнительно вокруг 
своей оси, иначе текст станет невозможно прочитать. 
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МОЗГОХРАНИЛИЩЕ 


Рис. 8.34. Страница ошибки 404 популярного российского веб-сайта ћабгаһабг.ги 


Это лишь пара из множества подобных примеров. 
Но как реализовать такой эффект с помощью ани- 
мации С55? 


Мы будем работать над очень простым примером 
аватара, движущегося по окружности, — что-то вроде 
упрощенной версии упомянутого выше эффекта из 
Соов1е+. Разметка выглядит так: 


НТМЕ 


<@1у с1аѕ55= "раһ" > 
<іте ѕгс="1еа.јрр" с1аѕѕ="амафаг" /> 
</41м> 


Прежде чем задумываться об анимации, необходимо 
применить несколько базовых стилей (определить 
размеры, фоны, поля ит. д.), для того чтобы элемент 
выглядел как на рис. 8.35. Поскольку стилизация 
очень простая, я не включаю соответствующий код 
в этот раздел, но если вы столкнетесь с трудностями, 
то всегда сможете подсмотреть решение в примере 
на веб-сайте по ссылке далее. Главное, о чем необ- 
ходимо помнить, — что диаметр пути равен зеөрх, 
то есть его радиус составляет 150рх. 


Если вы сомневаетесь в своем 
умении создавать круглые 
фигуры с помощью С55, то 
обратитесь к секрету «Гибкие 
ЭЛЛИПСЫ». 


Ф) 


Рис. 8.35. Наша отправная 
точка после определения 
нескольких простейших 
стилей — теперь мы можем 
полностью отдаться анимации 
С55! 
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После того как с базовыми стилями покончено, можно приступать к опреде- 
лению анимации. Мы хотим, чтобы аватар двигался по окружности, вдоль 
оранжевого пути. 


Но как анимация С$5 может помочь нам в создании этого эффекта? Столк- 
нувшись с этой проблемой, многие с ходу предложат решение, подобное сле- 
дующему: 


@Кеугате$ ѕріп { 
Фо { іғгапѕҒогт: гофафе(1%игп); } 


} 
.амаїаг { 

апіта+іоп: ѕріп 35 іпҒіпі+е 1іпеаг; 

їгапѕҒогт-огіріп: 50% 150рх; /* 150рх = раЕН гадіиѕ */ 
} 


Хотя это шаг в правильном направлении, аватар при этом начинает не только 
двигаться по окружности, но и вращаться вокруг своего центра (рис. 8.36). На- 
пример, обратите внимание, что в середине пути он оказывается вниз головой. 
Если бы это изображение содержало текст, то текст также переворачивался бы, 
и это создавало бы трудности с его прочтением. Мы хотим только, чтобы наше 
изображение двигалось по окружности, но сохраняло при этом ориентацию 
относительно самого себя. 





Рис. 8.36. Несколько снимков экрана нашей провальной попытки создать анимированное 
движение вдоль окружности 


В то время ни мне, ни Крису не удалось прийти к разумному решению. Един- 
ственный способ, до которого мы сумели додуматься, заключался в том, чтобы 
задать множество ключевых кадров, аппроксимируя окружность, но это опре- 
деленно не тянет на сколько-нибудь хорошую идею. Должен же быть лучший 
способ, правильно? 
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Решение с двумя элементами 


Поварив проблему в подсознании несколько месяцев, я все же придумала 
решение для загадки Криса. Основная идея та же, что и в секрете «Парал- 
лелограммы» или в секрете «Изображения в форме ромба»: вложенные 
трансформации, отменяющие друг друга. Однако на этот раз это будет проис- 
ходить не статически, а в каждом кадре анимации. Хитрость в том, что, каки в 
вышеупомянутых секретах, в данном решении нам потребуются два элемента. 
Следовательно, нам необходимо изменить наш исходный чистый НТМГ-код, 
добавив дополнительную обертку в форме блока дім: 


НТМЕ 


<аіу с1аѕ5= "раһ" > 
<аіу с1аѕ5="ауааг" > 
<іте 5гс="1еа.јрв" /> 
</аім> 
</ім> 


Давайте применим нашу исходную анимацию, которую мы уже тестировали 
выше, к обертке .ауаќаг. Как видно на рис. 8.36, решение пока не работает, по- 
скольку сам элемент также вращается. Но что, если применить к аватару другое 
вращение и поворачивать его вокруг своей оси на тот же угол, но в противо- 
положном направлении? Тогда два вращения будут отменять друг друга, и мы 
будем видеть только движение по окружности, создаваемое разницей между 
центрами трансформаций! 


Но мы пока не решили еще одну проблему: у нас нет статического вращения, 
которое мы могли бы отменить, только анимация, проходящая через целый диа- 
пазон углов. Например, если бы угол был равен бёдер, то мы бы отменили его 
с помощью -6ёіев (или з094ев), если бы это было 7ёӣев, то мы бы для отмены 
использовали -7даер (или 2904ев). Но если угол может быть любым в диапазоне 
от дае до з6еадер (или от ёёигп до 16игп, что эквивалентно), то что нам делать? 
Ответ намного проще, чем может казаться. Мы всего лишь определим анимацию 
на противоположном диапазоне (от з6ддер до 94ер), вот так: 


@Кеу+#гамеѕ ѕріп { 
фо { гапѕТогт: гоёа+е(1+игп); } 
} 


@кеу+Ғгатеѕ ѕріп-гемегѕе { 
Ғгот { ЕгапѕҒогт: гофафе(14игп); } 
} 


.амаї+аг { 
апіта+іоп: ѕріп 35 іпҒіпі+е 1іпеаг; 
їгапѕҒогт-огіріп: 50% 150рх; /* 150рх = радиус пути */ 
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.ама+аг > іт { 
апіта+іоп: $р1п-гемегзе 35 іпҒіпі+е 1іпеаг; 


} 


Теперь в любой момент времени, когда первая анимация смещает аватар на 
х градусов, вторая поворачивает его на 360 - х градусов, так как одна из них 
увеличивается, а вторая уменьшается. Это в точности то, чего мы стремились 
добиться, и, как видно на рис. 8.37, наше решение порождает желаемый эффект. 





Рис. 8.37. Теперь мы достигли желаемого эффекта, но код пока что довольно неуклюжий 


Код, однако, не мешало бы слегка улучшить. Мы повторяем все параметры 
анимации как минимум дважды. Если бы нам потребовалось изменить продол- 
жительность анимации, нам пришлось бы отредактировать два значения, что 
идет вразрез с принципами ОБУ. Эту проблему можно легко решить, унасле- 
довав все свойства анимации от родителя и переопределив название анимации: 


@Кеугате$ ѕріп { 

Фо { іғгапѕҒогт: гофафе(1%игп); } 
} 
@Кеу+#гамеѕ ѕріп-гемегѕе { 

Ғгот { ЕгапѕҒогт: гофафе(1%игп); } 


} 
.ауафаг { 

апіта+іоп: ѕріп 35 іпҒіпі+е 1іпеаг; 

їгапѕҒогт-огіріп: 50% 150рх; /* 150рх = радиус пути */ 
} 


.ама+аг > іме { 
апітаёіоп: іпһегі+; 
апіта+іоп-пате: ѕріп-гемегѕе; 


Но почему мы используем целую новую анимацию только для того, чтобы от- 
менить первоначальную? Помните свойство апіпа+іоп-аіпесёіоп из секрета 
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«Мерцание»? В том секрете мы узнали, в каких ситуациях оказывается по- 
лезным значение а1+егпафе. Здесь же мы будем использовать значение гемегѕе, 
для того чтобы получить перевернутую копию нашей исходной анимации, что 
вообще избавит нас от необходимости создавать вторую анимацию: 


@КеуЕгате$ ѕріп { 
фо { гапѕТогт: гоёа+е(1+игп); } 


} 
.ауатаг { 

апіта+іоп: ѕріп 35 іпҒіпі+е 1іпеаг; 

їгапѕҒогт-огіріп: 50% 150рх; /* 150рх = радиус пути */ 
} 


.ама+аг > іме { 
апітаёіоп: іпһегі+; 
апітаёіоп-дігесёіоп: геуег$е; 


Вот ивсё! Возможно, решение не идеальное, так как содержит в себе требование 
дополнительного элемента, но мы реализовали довольно сложную анимацию 
с помощью менее десятка строк С$5-кода! 


ПОПРОБУЙТЕ САМИ! Целиком эту дискуссию вы 
т можете прочитать в архи- 
ве по адресу ћЋір://11515. 
у3.ого/Агсһімеѕ/РиБіс/м\му- 
50уІе/2012РеБ/0201.һті. 


Һр://рІау.сѕѕѕесгеїѕ.іо/сігсиаг-2еІетепёѕ 


Решение с одним элементом 


Техника, описанная в предыдущем разделе, работает, но она далека от оптималь- 
ной, так как требует модификации НТМТ-кода. Когда я впервые пришла к этому 
решению, я отправила сообщение в список рассылки рабочей группы С5$ (тогда 
яеще не была ее частью), в котором предложила добавить возможность указывать 
несколько центров трансформации для одного и того же элемента. Это позволило 
бы воплощать решения, аналогичные предыдущему, с использованием только 
одного элемента, да и в целом казалось весьма здравой идеей. 


Дискуссия была в самом разгаре, когда Арье Грегор (Агуећ Стерог), бывший 
тогда одним из редакторов спецификации С$5 Тгапѕѓогтѕ, сделал заявление, 
которое поначалу сбивает с толку: 


«ЕгапѕҒогт-огівіп — это всего лишь синтаксический подсластитель. Вы всегда 
должны быть в состоянии вместо него использовать Егапѕ1аёе()». 


— Арье Грегор 
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Но, как выяснилось, любое значение {гап$Рогт-ог1в1п можно имитировать с по- 
мощью двух трансформаций +гапѕ1аїе(). Например, следующие два фрагмента 
кода эквивалентны: 


їгапѕҒогт: гофафе(304ез); 
ігапѕҒогт-огівіп: 200рх 3з90рх; 


{гап$Фогт: {гап$1а{е(200рх, 309рх) 
готафе(304ез) 
{гап$1а%е(-200рх, -300рх); 

їгапѕҒогт-огівіп: 0 0; 


4гап$Фогт: гофафе(304ев); 
4гап$Фогт-ог121п: 10@рх 50рх; 





|———100рх———э] 








. Д 5@рх . р 
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{гапзФоги: Єгапѕ1аёе(160рх,50рх); 4{гап$Фогт: {гап$1афе(1@0рх, 5@рх) 4гапзФогт: Єгапѕ1аёе(100рх,50рх) 
{гап$Рогт-ог191т: 0 0; готате(394ев); го{ате (304ев) 
4гап$Фогт-ог121т: Ө 0; {гап$1а{е ( -1090рх, -5@рх) ; 
4гап$Рогт-ог1е1т: Ө 0; 


Рис. 8.38. Как подменить центр трансформации двумя трансляциями. В каждом случае красная 
точка представляет центр трансформации. Наверху: использование їгапѕѓогт-огідіп. Внизу: 
использование двух трансляций, шаг за шагом 


Поначалу это кажется странным, но ситуация проясняется, если мы вспоми- 
наем, что функции трансформации не независимы. Каждая из них не просто 
трансформирует сам элемент, к которому применяется, она трансформирует 
всю систему координат этого элемента, влияя, таким образом, на последующие 
трансформации. Именно поэтому мы всегда говорим, что порядок трансфор- 
маций имеет огромное значение и одни и те же трансформации, выполненные 
В разном порядке, могут приводить к разным конечным результатам. Если же 
вам все еще не совсем понятно, то рис. 8.38 должен помочь. 
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Следовательно, благодаря этой идее мы можем использовать одно и то же 
значение Єгапѕогт-огівіп для обеих наших предыдущих анимаций (нам снова 
придется создать отдельные анимационные эффекты, так как ключевые кадры 
у них теперь не совпадают): 


@Кеугате$ ѕріп { 


гот { 

їгапѕҒогт: Егап$1афе(50%, 150рх) 
гоа+ъе(@ёигп) 
+гапѕ1аёе(-50%, -150рх); 

р 
їо { 

{гап$Фогт: Егап$1афе(50%, 150рх) 
гоёа+е(1+игп) 
+гапѕ1аёе(-50%, -150рх); 

} 

І 

@Кеу+гатеѕ ѕріп-гемегѕе { 
гот { 

{гап$Фогт: Егапѕ1а+е(50%,50%) 
гоа+е(1+игп) 
ёгапѕ1аёе(-50%, -50%); 
} 

їо { 

ёгапѕҒогт: ёгапѕ1а+е(50%,50%) 
гоёаъе(@ёигп) 
{гап$1а{е(-50%, -50%); 

$ 
} 
.ауатаг { 

апіта+іоп: ѕріп 35 іпҒіпі+е 1іпеаг; 
} 


.ама+аг > іме { 
апітаёіоп: іпһегі+; 
апіта+іоп-пате: ѕріп-гемегѕе; 


Код выглядит ужасно неуклюже, но не беспокойтесь, к концу раздела мы это 
поправим. Обратите внимание, что теперь нам не нужны разные центры транс- 
формаций, что было единственной причиной использования двух элементов 
и двух анимаций ранее. Теперь, когда у всех трансформаций общий центр, мы 
можем объединить две анимации в одну и работать только с .ауаќаг: 


@Кеу+#гамеѕ ѕріп { 
гот { 
їгапѕҒогт: Егап$1афе(50%, 150рх) 
гоёаъе(@ёигп) 
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{гап$1а{е(-50%, -150рх) 
{гап$1а{е (50% , 50%) 
гоёа+е(1&игп) 
Егапѕ1аёе(-50%, -50%) 


} 
Фо { 


їгапѕҒогт: Егап$1афе(50%, 150рх) 
гоа+е(1+игп) 
+гапѕ1аёе(-50%, -150рх) 
{гап$1а{е (50% , 50%) 
гоёаъе(@ёигп) 
{гап$1а{е(-50%, -50%); 


} 


.ауафаг { апіта+іоп: ѕріп 35 1пЕ1п1е 11пеаг; } 


Обратите внимание, что нам 
больше не требуются два 
элемента НТМІ: теперь мы 
можем просто применить 
класс ауа+аг к самому изо- 
бражению, так как мы больше 
не определяем для них стили 
по отдельности. 


Определенно, код улучшается, но он все еще длин- 
ный и непонятный. Можно ли сделать его более 
емким? Здесь возможно несколько потенциальных 
усовершенствований. 


Решение, лежащее на поверхности, заключается 
в том, чтобы объединить соседние трансформации 
{гап$1а{е(), в частности +гап$1а*е (-50%, -150рх) 
И {гап$1а{е(50%, 50%). К сожалению, процентные 


и абсолютные значения невозможно комбинировать (если только не прибегать 
к помощи функции са1с(), но это также не улучшит читабельность кода). Однако 
горизонтальные трансформации отменяют друг друга, то есть, по сути, у нас 
здесь две трансляции по оси У (+гапз1афеу(-150рх) {гапз1а%еу(50%))). Кроме того, 
поскольку вращения отменяют друг друга, мы можем также убрать горизон- 
тальные трансляции до и после них и объединить вертикальные. Теперь наши 
ключевые кадры выглядят так: 


@Кеу{гате$ ѕріп { 


гот { 
{гап$Фогт: Егап$1афе\у(150рх) +гапѕ1аёеү(-50%) 
гоёаъе(@ёигп) 
Егапѕ1аёеү(-150рх) ёгапѕ1а+теү(50%) 
гоа+ъе(1&игп); 
} 
Фо { 
{гап$Фогт: Егап$1афе\у(150рх) +гапѕ1аёеү(-50%) 
гофафе(1Фигп) 
{гап$1а%еу\у(-150рх) ёгапѕ1а+еү(50%) 
гоаъе(@ёигп) ; 
} 


} 


.ауафаг { апіта+іоп: ѕріп 35 1пЕ1п1е Ііпеаг; } 


47. Анимация вдоль окружности 335 


Это уже короче, и повторений меньше, но все же не идеально. Можно ли 
сделать код еще лучше? Если в качестве начального положения аватара 
установить центр круга (как на рис. 8.39), то можно избавиться от первых 
двух трансляций, которые, по сути, помещают его в центр. Тогда анимация 


становится такой: 


@Кеу{гате$ ѕріп { 
гот { 
ЕгапѕҒогт: гофате (9%игп) 


{гап$1а%е\у(-150рх) Егап$1афеу (50%) 


гофафе(1%игп); 


т 
їо { 
ЕгапѕҒогт: гофафе(1%игп) 
{гап$1а%еу\(-150рх) Егап$1афеу (50%) 
гофафе(@игп); 
} 


} 


.ауафаг { ап1та1оп: ѕріп 35 1п1п1е 11пеаг; } 


Кажется, это лучшее, чего мы можем достичь на 
сегодняшний день. Этот код нельзя назвать идеаль- 
ным сточки зрения принципов ОКУ, но он довольно 
короткий. Здесь минимум повторений и нет лишних 
элементов НТМГ. Для того чтобы сделать его еще 
более емким и избежать повторения радиуса пути, 
можно воспользоваться помощью препроцессора, но 
я оставлю это в качестве упражнения для читателя. 


ПОПРОБУЙТЕ САМИ! 


Һр://ріау.сѕѕѕесгеїѕ.іо/сігсшаг 


СВЯЗАННЫЕ СПЕЦИФИКАЦИИ 
С55 Апітаїіопѕ: Һр://%3.огд/ТЕ/с55-апітайопѕ 
С55 Тгапѕѓогтѕ: Һр://3.0гд/ТВ/с55-їгапѕғогтѕ 





Рис. 8.39. Если в самом 
начале поместить аватар 

в центр круга, то описание 
ключевых кадров станет 
короче. Обратите внимание, 
что это состояние также 
будет служить резервным 
решением для случая, когда 
анимация не поддерживается, 
что может быть как 
желательным вариантом, так 
и нежелательным 
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